Forum Moderators: not2easy
Coding as follows:
CSS style sheet:
--------------------------------------------------------
/* Begin CSS Drop Down Menu */
#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
--------------------------------------------------------
HTML as follows (sorry...I know it's long but I to make sure I get it right in the end):
-----------------------------------------------
<div id="menuhcontainer">
<div id="menu">
<ul>
<li><a href="#">Ventilation</a>
<ul>
<li><a title="#" href="#">Bathroom Fans</a>
<ul>
<li><a title="#" href="#">Ceiling Mounted</a></li>
<li><a title="#" href="#">Fans with Lights</a></li>
<li><a title="#" href="#">Fans with Heaters</a></li>
<li><a title="#" href="#">Decorative Fans</a></li>
</ul>
</li>
<li><a title="#" href="#">Range Hoods</a>
<ul>
<li><a title="#" href="#">Wall Chimney Range Hoods</a></li>
<li><a title="#" href="#">Island Range Hoods</a></li>
<li><a title="#" href="#">Under Cabinet Range Hoods</a></li>
</ul>
</li>
<li><a title="#" href="#">Whole House Fans</a></li>
<li><a title="#" href="#">Dryer Booster Fans</a></li>
<li><a title="#" href="#">Utility Fans</a>
<ul>
<li><a title="#" href="#">Wall Mounted Utility Fans</a></li>
<li><a title="#" href="#">Inline Utility Fans</a></li>
<li><a title="#" href="#">Utility Fans Accessories</a></li>
</ul>
</li>
</ul></li>
</ul>
<ul>
<li><a title="#" href="#">Fans</a>
<ul>
<li><a title="#" href="#">Bathroom Fans</a>
<ul>
<li><a title="#" href="#">Ceiling Mounted</a></li>
<li><a title="#" href="#">Fans with Lights</a></li>
<li><a title="#" href="#">Fans with Heaters</a></li>
</ul>
</li>
<li><a title="#" href="#">Ceiling Fans</a></li>
<li><a title="#" href="#">Floor Fans</a></li>
<li><a title="#" href="#">Table Fans</a></li>
</ul>
</li>
</ul>
<ul>
<li><a title="#" href="#">Air Purifiers</a></li>
</ul>
</div><!-- end the menuh-container div -->
</div><!-- end the menuh div -->
Thank you so much in advance for your help!
Fiona
[edited by: SuzyUK at 9:20 am (utc) on Oct. 3, 2008]
[edit reason] shortened code sample [/edit]
first you have an error with your IE conditional, I don't know if it's a typo or not but you have it nested inside the main <style> tags, it should not be in the stylesheet but instead a separate call from the <head> element whether you embed the actual CSS in it or use it to call a separate IE sheet is up to.. and also this conditional [if IE] code can now be updated because IE7 does not need the script.
I'll add just my suggested changes and the missing </style> tag and the revised conditional comment at the end of this post, and any questions fire away :)
Then, later discoveries on this style of menu has led me to believe display:block/none is not the best way to trigger the drops and pops.. IE6 and 7 do some funky things like not display the drops at all or display them and then don't take them away when there is no hover or they sometimes even display empty lists :o so I'm also going to change that and the use the already existing absolute positioning method
lastly, re your positioning problem, the first drop level needs slightly different positioning co-ordinates from the 2nd+ as it is immediately below its parent while the others are to the right of their parents
IE7 also brought with it some (hasLayout) problems of it's own so there are 2 other small changes to counter the new problems
first add to the
#menu a, #menu h2 {
...
yourstyles;
..
[b]overflow: hidden;[/b]
}then, from #menu li {} to end (of your CSS above) replace with this and see if that does what you want..
/* move the relative position to the hovered li.. IE doesn't like doing anything with
unless it has something on the basic hover and the positioning is not needed until the hover is activated so this saves adding something unnecessary */:hover element element#menu li {}
#menu li:hover {position: relative;}/* this bit is common to all drop menus */
#menu ul ul {
position: absolute;
z-index: 500;
top: auto; /* the first drop automatically appears below its parent */
}#menu ul ul ul {
top: 0; /* the second level+ needs brought back to the actual top to match their parent */
}div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{left: -9999px;} /* use this method of hiding to avoid IE quirks as mentioned above *//* bring the first level back onto the page and position where it automatically should be */
div#menu ul li:hover ul {left: auto;}/* bring the 2nd level+ back onto the page but put them to the right of their parent */
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{left: 100%;}/* add the missing style tag */
</style><!-- change the conditional comment below so it only applies to IE6 and below -->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
try that and see, if it works you can remove my comments they're only there for you!
PS: I removed quite a bit of the HTML from your post as it was too long and though it looks like I removed things it should not be necessary for you to actually make any changes to your original HTML code :)
[edited by: SuzyUK at 9:22 am (utc) on Oct. 3, 2008]
#menu li:hover {z-index:100 }.
However, if I fix that by changing it to read
#menu li:hover {position: relative}
the menu drops down behind the content below it;
Any ideas on how to make both of these work so the menu appears above all other content and the drop dow expansions line up correctly?
Thanks!
