Dropdown menu not working in IE6

Question

hello,

The following dropdown menu works fine in modern browsers (IE7/firefox) but not in IE6. Can someone suggest a fix?

CSS:

#menu {
    height: 29px;
    background: url(img/menu.png) repeat-x top;
    border-left: 1px solid #0b2f3e;
    border-right: 1px solid #0b2f3e;
    position: relative;
}

#menu ul {
    display: none;
    position: absolute;
    top: 29px;
    left: 0;
    background: #316f86;
    width: 220px;
    z-index: 10;
}

#menu ul ul {
    top: -1px;
    left: 220px;
    width: 200px;
    border: 1px solid #4a7a8c;
    border-bottom: none;
}

#menu li {
    float: left;
    display: block;
    position: relative;
}

#menu li li {
    float: none;
}

#menu li a {
    float: left;
    display: block;
    color: #fff;
    height: 16px;
    line-height: 16px;
    padding: 7px 20px 6px 20px;
    border-right: 1px solid #0b2f3e;
}

#menu ul li a {
    float: none;
    border-right: none;
    border-bottom: 1px solid #4a7a8c;
}

#menu li a:hover {
    border-bottom: none;
}

#menu ul li a:hover {
    color: #c0e8ff;
    border-bottom: 1px solid #4a7a8c;
}

.menu-bottom {
    background: url(img/menu.png) repeat-x bottom;
}

.menu-top {
    background: url(img/menu.png) repeat-x top;
}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}

#menu img {
    vertical-align: middle;
    overflow: hidden;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
}

jQuery: (should be no problem with jquery)

// dropdown menu (unlimited sub-levels)
jQuery("#menu ul").css({display: "none"}); // Opera Fix
jQuery("#menu li").hover(function(){
if (jQuery(this).parent().attr("id") == 'menu') {
jQuery(this).removeClass('menu-top');
jQuery(this).addClass('menu-bottom');
}
jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(500);
},function(){
if (jQuery(this).parent().attr("id") == 'menu') {
jQuery(this).removeClass('menu-bottom');
jQuery(this).addClass('menu-top');
}
jQuery(this).find('ul:first').css({visibility: "hidden"});
});

I am sure its something with how IE6 treats floats/blocks..but just can't get the hang of it.

Answer 1

As I recall IE6 has issues with the

a:hover property on NON <a> elements

Usually javascript had to be used in a separate call to fix that.

This might help: http://www.danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector

Answer 2

It's worth taking a look at Stu Nicholl's CSS Play website, his menus page holds dozens of examples, many of which are cross-browser compatible, and inclusive of IE6.

Answer 3

Why reinvent the wheel. Good menu system is superfish or suckerfish. Tried and tested on ie6 etc.

Answer 4

try using the jquery live method instead of hover

jQuery("#menu li").hover -> jQuery("#menu li").live("hover", function()

it might fix the problem with hover not fired in ie6

Answer 5

Thanks all.. I managed to fix the CSS and make it work with IE6 :)

Here it is just in case anyone needs it.

#menu, #menu ul {
    position: relative;
    z-index: 300;
    width: 100%;
}

#menu {
    height: 29px;
    background: url(img/menu.png) repeat-x top;
    border-left: 1px solid #0b2f3e;
    border-right: 1px solid #0b2f3e;
}

#menu ul {
    width: 230px;
    position: absolute;
    display: none;
    top: 29px;
    left: 0;
    background: #316f86;
}

#menu ul ul {
    width: 232px;
    top: -1px;
    left: 230px;
    background: #316f86;
    border: 1px solid #4a7a8c;border-bottom: none;
}

#menu li {
    float: left;
    position: relative;
}

#menu a {
    display: block;
    padding: 9px 20px 8px 20px;
    color: #fff;
    border-right: 1px solid #0b2f3e;
}

#menu li ul a {
    float: left;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #4a7a8c;
    width: 190px;
}

#menu li a:hover {
    border-bottom: none;
}

#menu li ul a:hover {
    color: #c0e8ff;
    border-bottom: 1px solid #4a7a8c;
}

.menu-bottom {
    background: url(img/menu.png) repeat-x bottom;
}

.menu-top {
    background: url(img/menu.png) repeat-x top;
}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul {display:none;}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul {display:block;}

#menu img {
    vertical-align: middle;
    overflow: hidden;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
}