CSS problems: with custom ul,li dropdown navigation in ie, especially with the ie6 overflow:visible bug

Question

The essence of the ie6 bug (dropdown entries must be truncated via overflow hidden to prevent ie from incorrectly expanding instead of acting as overflow:visible) can be seen in it's current (hacky) form in the screenshot below, and at the site http://zd-cms.com

Wrong (ie6):

http://img249.imageshack.us/img249/352/screenshot68.png http://img249.imageshack.us/img249/352/screenshot68.png

Right (FF, IE8, Chrome):

http://img402.imageshack.us/img402/7208/screenshot69.png http://img402.imageshack.us/img402/7208/screenshot69.png

The menu entry should show:

• Contact Us
• Resellers
• Support
• Designer Services

But since I can't get overflow:visible working or otherwise simulate it, parts of the dropdown menus get cut off. Currently the css in the ie6-specific stylesheet is:

#zd-nav {
  padding-left:0;
  margin-left:0;
  background-color:transparent;
}
#zd-nav .zd-sub-nav{
  margin-top:5px;
  **width:73px**;
  **overflow:hidden;**
}

A few solutions to the bug that I've tried: I'm aware of the ie6 overflow:visible bug, (as per here: http://www.positioniseverything.net/explorer/expandingboxbug.html ), which renders overflow:visible null and void. Read through: Strategy for Fixing Layout Bugs in IE6? and tried a few hacks to try to make it really act as overflow:visible, but nothing worked.

Right now, I've got the dropdown part of the menu set to overflow:hidden as a last ditch solution because I can't get ie6 to let the menu act in an overflow:visible manner.

Pointing out any problems with the nav in ie7 or ie8 would be much appreciated as well.

Suggestions?

Answer 1

This worked for me:

#zd-nav .zd-sub-nav li{
    float:left; 
    clear:left; 
    position:relative; 
    z-index:20; /* or some other arbitrary biggish number */
}

The float gives the li the right width, and the position relative and z-index make it show above (ie not constrained by) the ul.

Answer 2

Try this out (assuming that you want the drop down [plus sub sub sub] to also be allowed to "float" over any other elements on the page that get in the way):

.zd-nav-active {
    position: relative;
}
.zd-sub-nav {
    position: absolute;
    z-index:10000;
}

Forcing the li containg the sub navigation to position relative will not change position on the page. It does, however, allow you to use position absolute on child elements, while keeping them contained within the parent by default, AND releasing it from the "flow" of the page (thus preventing the push down effect).

Answer 3

Try either:

word-wrap:break-word; /*use this in the #zd-nav .zd-sub-nav class*/

or...

width:100%; /*instead of setting the width to 73px*/

you could do height:100%; also.

It's a hasLayout issue that Microsoft invented. Found the info here: http://zoffix.com/css/ie/haslayout.shtml

Hope this helps...

Answer 4

This should work

#zd-nav .zd-sub-nav{ 
    margin-top:5px;
    width: auto;
    display: block;
    overflow: visible
    }

An auto width is used to adopt the size of each navigation item without needing to give each one a fixed width.

Hope this helps.

Answer 5

I suggest to use a relative position to the container, with specifying top and left and width