Question

我的下拉菜单在IE以外的所有浏览器中都运行良好。我可以看到悬停功能在开发人员工具中触发，但由于某种原因，菜单实际上并不可见。我已经用我能想到的各种方式调整了CSS ......我有什么东西可以忽略吗？

该网站是：http://www.ironbridgeband.com

音乐自动播放（不是我的选择），因此请注意您的声音级别 根据开发人员工具，IE9是浏览器模式。

编辑：这是CSS和正在使用的JQuery：

    /* 
    LEVEL ONE
*/
#navigation > ul                         {text-align: center; position: relative;}
#navigation > ul li{
float: left;
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00990000,endColorstr=#00990000); 
zoom: 1;
z-index: 0;
}
#navigation > ul a:hover                 {color: #000;}
#navigation > ul a:active                {color: #fff;}
#navigation > ul li a                    {display: block;}
#navigation > ul li.hover,
#navigation > ul li:hover                {color: #fff; position: relative; }
#navigation > ul li.hover a              {color: #FFF;}


/* 
    LEVEL TWO
*/
ul.children{
    list-style-type: none;
    font-size: 0.8em;
    width: 100%;
    visibility: hidden;
    position: absolute;
    top: 50px;
    z-index: 500;
    margin-left: 0px !important;
    padding-left: 0px !important;
    line-height:2em;
    background: transparent !important;
    }

ul.children li{
    font-size: 16px;
    text-transform: none;
    font-weight: normal;
    float: none !important;
    clear: both;
    font-weight: bold; 
    background: #158082;
    color: #fff; 
    border: none; 
    float: none; 
    margin-left: -25px !important;
    padding: 0 !important;
    z-index: 501;
    }

ul.children li.hover{
    background-color: transparent !important;
    }                                     
                                    /* IE 6 & 7 Needs Inline Block */
ul.children li a{ 
    border-right: none; 
    display: inline-block;
    width:auto;
    }

* JQuery：*

$(function(){

    var config = {    
         sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)    
         interval: 100,  // number = milliseconds for onMouseOver polling interval    
         over: doOpen,   // function = onMouseOver callback (REQUIRED)    
         timeout: 200,   // number = milliseconds delay before onMouseOut    
         out: doClose    // function = onMouseOut callback (REQUIRED)    
    };

    function doOpen() {
        console.log("doOpen()")
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
        $('ul:first',this).css('z-index', '100001');
    }

    function doClose() {
        console.log("doClose()")
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    }

    $("#navigation > ul li").hoverIntent(config);

    $("#navigation > ul li ul li:has(ul)").find("a:first").append(" &raquo; ");

});

Answer 1

尝试为#navigation元素提供比下拉菜单更高的z-index。

在Internet Explorer 9中看不到JQuery / css下拉菜单

1 个答案: