Question

我的jquery下拉菜单在IE7或IE8兼容性视图中失败。

我将此jquery用于以下链接中的下拉菜单：

var timeout    = 1000;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('.menu ul > li').bind('mouseover', jsddm_open)
   $('.menu').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

http://www.urbanlifefeed.com/cruise_ulf/

这就是css：

div.menu { height:49px;}
div.menu ul {
    /*width:886px;
    margin:0 7px;*/
    width:921px;
    margin:0;
    background:url(images/nav_bg.gif) repeat-x 0 0;
    float:left;
    border-left: 1px solid #FFFFFF;
}
div.menu ul li {
    font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
    font-size:21px;
    line-height:49px;
    padding:0 12px;
    text-transform:uppercase;
    float:left;
    border-right: 1px solid #FFF;
    position:relative;
}
div.menu ul li ul
    {
    position:absolute;
    top:49px;
    left:0;
    width:280px;
    border:0px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    background:url(images/sub_nav_bg.png) repeat 0 0;
    z-index:999999 !important;
    visibility:hidden;
    float:none;
    display:inline-block;
    }
div.menu ul li ul li:hover {background:url(images/sub_nav_bg.png) repeat 0 0;}
div.menu ul li ul li
    {
    border:0px;
    border-bottom:1px solid #f4c726;
    width:256px;;
    float:left;
    }
div.menu ul li ul li a
    { color:#f4c726; text-transform:capitalize;}
div.menu ul li:hover{
    background:url(images/nav_roll_bg.png) repeat-x center 0;
}
div.menu ul li a {
    color:#FFF;
    text-decoration:none;
    float:left;
    height:49px;
    width:100%;
}
div.menu ul li a:hover{
    color:#fbf0cc;
    }

Answer 1

在我看来，菜单位于滑块容器后面。您可以使用z-index attribute确保菜单块始终显示在滑块上方。例如，保存滑块的div可以将z-index设置为1，然后将菜单设置为z-index为2或更高。

ie7中的下拉菜单失败

1 个答案: