Forum Moderators: not2easy
Here is the code for the page and the CSS style sheet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../style.css" media="screen" />
</head>
<body>
<div id="wrap">
<div id="header">Header</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a>Reporting</a>
<ul>
<li><a href="#">Product Performance</a></li>
<li><a href="#">Mailer Reporting</a></li>
<li><a href="#">Supplier Performance</a></li>
<li><a href="#">Space & Range Reports</a></li>
<li><a href="#">Event Reporting</a></li>
</ul></li>
<li><a>Templates</a>
<ul>
<li><a href="#">Hierarchy Templates</a></li>
<li><a href="#">Planning Templates</a></li>
<li><a href="#">Supplier Templates</a></li>
</ul></li>
<li><a>Microstrategy</a>
<ul>
<li><a href="#" target="_blank">Go To Microstrategy</a></li>
</ul></li>
<li><a>Information</a>
<ul>
<li><a href="#">Planning Calendar</a></li>
<li><a href="#">Store Maps</a></li>
<li><a href="#">Other</a></li>
</ul></li>
<li><a>Training</a>
<ul>
<li><a href="#">Course Schedules</a></li>
<li><a href="#">Training Documentation</a></li>
<li><a href="#">One on One Training</a></li>
<li><a href="#">Sign Up for a Course</a></li>
</ul></li>
<li><a>Help Page</a>
<ul>
<li><a href="#">MIC Access Instructions</a></li>
<li><a href="#">FAQ</a></li>
</ul></li>
<li><a>Contact Us</a>
<ul>
<li><a href="#">Information Team</a></li>
<li><a href="#">Microstrategy Team</a></li>
<li><a href="#">Training Team</a></li>
</ul></li>
</ul>
<!--END OF MENU--></div>
<!--End of Main Page DIV //WRAP--></div>
</body>
</html>
HERE IS THE CSS CODE FOR THE MENU
#menu {
height: 30px;
line-height: 30px;
background: #3E92EA url(images/menu.jpg) no-repeat;
}
#menu ul {
padding-left: 10px;
list-style-type: none;
}
#menu ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
#menu ul li a {
color: #eee;
padding: 0 10px;
display: block;
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid #ffffff;
white-space: nowrap;
margin-left: 1px;
}
#menu ul li a:hover {
color: #AD0000;
text-decoration: none;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #FEBD00; }
li:hover li a:hover { background: #FEBD00; }
ul li:hover ul li { width: 16em; }
[edited by: SuzyUK at 10:33 pm (utc) on Nov. 23, 2009]
[edit reason] just a little code trimming [/edit]
apologies for a somewhat delayed response, in case you're still after a solution, here's some reworked CSS.
#menu {
height: 30px;
line-height: 30px;
background: #3E92EA url(images/menu.jpg) no-repeat;}
#menu ul {
padding-left: 10px;
margin: 0; /* add this i.e. zero margin and use padding or vice versa to make left indent x-browser compatible */
list-style-type: none;
}#menu ul li {
/* position: relative; /* place this on the li:hover for best results in IE */
float: left;
}#menu ul ul {
font-size: 11px;
display: none;
}#menu ul ul li {
clear: left; /* adding this SHOULD SOLVE YOUR ISSUE */
width: 16em; /* moved from other rule to keep them together */
}#menu ul li a {
color: #eee;
padding: 0 10px;
display: block;
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid #ffffff;
white-space: nowrap;
margin-left: 1px;}
#menu ul li a:hover {
color: #AD0000;
text-decoration: none;
}#menu li:hover {position: relative;} /* add the positon:relative; to the :hover for best results in IE */
#menu li:hover ul {
display: block;
position: absolute;
}#menu li:hover li {
/*float: none;*/ /* remove this and leave the li's floating with the "clear:left" rule in place or IE puts in extra whitespace */
font-size: 11px;
}#menu li:hover a { background: #FEBD00; }
#menu li:hover li a:hover { background: #FEBD00; }/* ul li:hover ul li { width: 16em; } width can be placed on all second li's see rule up top */
I've put notes in the bits I changed or moved, but the main addition which should solve the "sometimes horizontal" problem is the addition of clear: left; to the second level floated list elements, forcing them to go vertical.
You had also removed the float off these <li>'s on hover of the first level, and while that would appear to logical, (I would've placed it on the ul li li {} itself though, not the hover) I think that was confusing IE a bit too.. older versions of IE and in fact IE8 was also doing it for me will put additional whitespace between non-floated list items which contain block level links, arghh.. anyway the solution to this is to actually float/clear them, so your code was very nearly there, IE, just needs to be told clearly to clear the previous float ;)
HTH, and sorry for the delay
Suzy
