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