Выпадающее меню не работает в IE6

Question

Следующее выпадающее меню прекрасно работает в современных браузерах (IE7 / firefox), но не в IE6. Может кто-нибудь предложить исправление?

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: (не должно быть проблем с 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"});
    }
);

Я уверен, что кое-что из того, как IE6 обрабатывает поплавки / блоки ... но просто не может освоить это.

Answer 1

Зачем изобретать велосипед. Хорошая система меню - суперфиш или присоска. Испытано на ie6 и т. Д.

Answer 2

Стоит взглянуть на CSS Play веб-сайт Stu Nicholl, его меню s содержит десятки примеров, многие из которых совместимы с различными браузерами и включают IE6.

Answer 3

Спасибо всем .. Мне удалось исправить CSS и заставить его работать с IE6:)

Вот только на всякий случай.

#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;
}

Answer 4

попробуйте использовать метод jquery live вместо hover

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

это может решить проблему с зависанием, не запущенным в ie6

Answer 5

Насколько я помню, IE6 имеет проблемы с

a:hover property on NON <a> elements

Обычно для устранения этого пришлось использовать javascript в отдельном вызове.

Это может помочь: http://www.danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector