IE7在主导航菜单上杀死了我的jQuery下拉菜单 [英] IE7 kills my jQuery drop down on main navigation menu

问题描述

下拉菜单使IE7中的其他项目模糊不清

The drop down obscures the other items in IE7

http://southasianlitfest.com

CSS

   #nav
{
    _height:57px;
    float:left;
    min-height:57px;
    padding-top:15px;
    width:960px;
}

#nav ul#pages
{
    float:left;
}

#nav ul#pages li
{
    float:left;
    text-transform:uppercase;
}

#nav ul#pages li .sub-menu
{
    -moz-border-radius:5px;
    -moz-box-shadow:0 0 10px #8F8675;
    -webkit-border-radius:5px;
    -webkit-box-shadow:0 0 10px #8F8675;
    background:#FFF;
    border:1px solid #DB1A14;
    border-radius:5px;
    display:none;
    padding:0 3px;
    z-index:3;
}

#nav ul#pages li .jquery.sub-menu
{
    -moz-border-radius:0;
    -moz-border-radius-bottomleft:5px;
    -moz-box-shadow:-1px 1px 2px #8F8675;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-radius:0;
    -webkit-box-shadow:-1px 1px 2px #8F8675;
    background:transparent;
    border-bottom-left-radius:5px;
    border-radius:0;
    border-right:none;
    border-top:none;
    clear:left;
    margin-left:3px;
    position:absolute;
}

#nav ul#pages li .jquery.sub-menu .submenu
{
    background:#F19422;
}

#nav ul#pages li .jquery.sub-menu li
{
    clear:none;
    float:left;
}

#nav ul#pages li .jquery.sub-menu li a
{
    color:#fff;
}

#nav ul#pages li.sub_selected a
{
    color:#EA583A;
}

#nav ul#pages li.has_submenu:hover ul,#nav ul#pages li.has_submenu .sub-menu:hover
{
    display:none;
}

#nav ul#pages li:hover ul,#nav ul#pages li .sub-menu:hover
{
    display:block;
}

#nav ul#pages li ul li
{
    clear:left;
}

#nav ul#pages li ul li a
{
    color:#5B6384;
}

#nav ul#pages li ul li a:hover
{
    color:#000;
    text-decoration:none;
}

#nav ul li
{
    display:inline;
    padding-right:25px;
}

#nav ul#pages li .sub-menu li a:hover,#nav ul#pages li .jquery.sub-menu li a.selected
{
    color:#DD2522;
}

JS

//function for hover submenus
    menu_items = $('#nav #pages li');
    submenus = $('#nav #pages li ul.sub-menu');
    submenu_pointers = $(submenus).siblings('a');
    submenus_parents = $(submenus).parent();




    $(submenus_parents).hover(function(){
            hovered = $(this).data('hovered');
            pointer = $(this).children('a');
            menu = $(this).children('.sub-menu');

            this_parent = $(this).parent();
            if($(this_parent).hasClass('sub-menu')){
                $(submenus).filter(this_parent).stop(true,true).hide().data('hovered', false);
            } else {
                $(submenus).hide().data('hovered', false);
            }


            if(!hovered){

                $(this).data('hovered', true);
                rotatePointer(submenu_pointers,'up');
                $(menu).stop(true,true).slideDown(300);
                rotatePointer(pointer,'down');


            } else {
                $(this).data('hovered', false);
                $(menu).delay(1000).stop(true,true).slideUp(300);
                rotatePointer(pointer,'up');

            }



        });

推荐答案

尝试设置子菜单的并列LI的位置:

Try setting the position of the contaning LI of the sub menu:

#nav ul#pages li
{
    float:left;
    text-transform:uppercase;
    position:relative;
}

这篇关于IE7在主导航菜单上杀死了我的jQuery下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！