[jQuery] Superfish IE 6 - no menu appears
I have a dynamically-generated vertical superfish menu working in
every browser *except* IE6, which I still have to support :\
When I hover on a top-level menu item the second-level menu opens
accordion-style (vertically) with a blank gap equal to what its menu's
height would be, rather than a horizontal flyout. I noticed the arrow,
indicating a submenu exists, jumps out to the right where the right
margin of the second-level menu should have appeared.
Below is my latest menu CSS. The z-indexes were added to overcome a
stacking issue with a DIV rotating images with Mike Alsup's cycle
plugin, next to the menu.
#nav {
position: absolute;
width: 145px;
margin: 0px;
padding: 0px;
top: 126px;
left: 2px;
font-size: 10px;
z-index: 5;
}
#nav ul { /* all lists */
padding: 0px;
margin: 0px;
list-style: none;
width: 148px;
z-index: 5;
}
#nav li { /* all list items */
border: none;
position: relative;
float: left;
line-height: 27px;
margin-bottom: -1px;
width: 145px;
height: 28px;
}
#nav li ul { /* second-level lists */
position: relative;
padding: 0px;
left: -999em;
margin-left: 145px;
margin-top: -50px;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
margin-top: -30px;
}
#nav li a {
width: 135px;
w\idth: 135px;
display: block;
color: white;
font-weight: bold;
text-decoration: none;
background: url(/images/buttonOff.png);
padding: 0 0.5em;
}
#nav li a:hover {
color: black;
background: url(/images/buttonHover.png);
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /*
lists nested under hovered list items */
left: auto;
}
Cheers,
Laker