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

Answer 1

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 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

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 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