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

Reply via email to