Internet Explorer is mildly annoying

IE7 IE6 menu drop down rollover

[thegrrraue]

I have links across the top of my page that, when rolled over, have drop down menus below them. IE6 fails to recognize that there's a drop down at all, IE7 recognizes it, but only keeps it up for the first three links down the list. After that, it considers the menu to be rolled out, apparently, and the drop down goes away.

Below is the CSS for the menu. Any thoughts?

#menu {
width: 66%;
position: absolute;
top: 91px;
left: 385px;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px myriad, arial, helvetica, sans-serif;
display: block;
border-width: 0px;
border-style: solid;
margin: 0;
padding: 2px 3px;
}

#menu ul ul a {
color: #fff;
background: #D7AC2A;
text-decoration: none;
}

#menu ul ul a:hover {
color: #fff;
background: #BB8E01;
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
display: block;
}

#menu ul ul ul {
position: absolute;
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;}

[rocknbil]

Welcome aboard thegrrraue, this is a Suckerfish menu, correct?

It could be a number of things:

- Error in page code or invalid document type (does the page validate?)
- Error in Javascript, if it is a Suckerfish menu (got "display a notification about every script error" enabled in IE 6?)
- Some error in the naming of the ID's/nesting of the divs etc, causing the drop-down layers to not get recognized in IE 6

Last, without further info, I see you have a rather complex layering of selectors (div#menu ul ul li:hover ul ul). What I would do do debug this is take a copy of the doc, strip it back to basics, and begin adding things that DO work until it stops working.

[londrum]

IE6 doesn't recognise :hover on anything other than the anchor tag.
so a:hover is okay, but li:hover just won't work. there are some workarounds for it, but they involve using javascript

[4css]

Hi thegrrraue

welcome to the forums,

Do a google on whatever:hover. I have used this technique and it does work on IE6.

Hope this helps you out a bit!