sukerfish 下拉菜单的 Internet Explorer 问题

Question

我只在 IE 中遇到了下拉菜单的问题，并且我在不同的版本中得到了不同的结果。

我要访问的导航可以在这里找到：http://lt.philosophydesign.com/

它可以在 Firefox/Safari/Chrome 中正常工作和显示。 它在 IE9 和 IE8 中显示良好，但是当您尝试浏览下拉菜单中的第一项时，下拉菜单会消失。 在 IE7 和 IE6 中，下拉菜单显示在主体内容的后面。

奇怪的是，如果我删除 <div id="content"> 的内容，导航在 IE9 和 IE8 中会正确显示和运行。

这是导航 CSS：

/* Navigation */
div#navcontainer {
    left:193px;
    position:absolute;
    top:108px;
    width:767px;
    z-index:1000;
}
div#navcontainer ul {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    width:100%;
}
div#navcontainer ul li {
    display:inline;
    float:left;
    margin-left:27px;
    position:relative;
}
div#navcontainer ul li a {
    color:#95006a;
    display:block;
    font-family:"LEWINRockwellExtraBoldRegular", "Arial Black", Gadget, sans-serif;
    font-size:14px;
    text-transform:uppercase;
    text-decoration:none;
}
div#navcontainer ul li.lightblue:hover a,
div#navcontainer ul li.lightblue.selected a,
div#navcontainer ul li.lightblue.sfHover a {
    color:#94CDF3;
}
div#navcontainer ul li.green:hover a,
div#navcontainer ul li.green.selected a,
div#navcontainer ul li.green.sfHover a {
    color:#71B9AE;
}
div#navcontainer ul li.limegreen:hover a,
div#navcontainer ul li.limegreen.selected a,
div#navcontainer ul li.limegreen.sfHover a {
    color:#BBD353;
}
div#navcontainer ul li.grey:hover a,
div#navcontainer ul li.grey.selected a,
div#navcontainer ul li.grey.sfHover a {
    color:#A8A9AC;
}
div#navcontainer ul li.darkblue:hover a,
div#navcontainer ul li.darkblue.selected a,
div#navcontainer ul li.darkblue.sfHover a {
    color:#1B2768;
}
div#navcontainer ul li.magenta:hover a,
div#navcontainer ul li.magenta.selected a,
div#navcontainer ul li.magenta.sfHover a {
    color:#CC2D88;
}
div#navcontainer ul li ul {
    position:absolute;
    top:-9999px;
    left:0;
    width:195px;
}
div#navcontainer ul li:hover ul, div#navcontainer ul li.sfHover ul{
    top:17px;
}
div#navcontainer ul li ul li {
    float:left;
    margin-left:0;
    width:195px;
}
div#navcontainer ul li ul li a {
    display:block;
    font-size:12px;
    margin-top:1px;
    padding: 2px 4px;
}
div#navcontainer ul li.lightblue ul li a {background:#94CDF3; color:#C9E6F9 !important;}
div#navcontainer ul li.green ul li a {background:#71B9AE; color:#C3DBD6 !important;}
div#navcontainer ul li.limegreen ul li a {background:#BBD353; color:#DFE9B0 !important;}
div#navcontainer ul li.grey ul li a {background:#A8A9AC; color:#D3D4D5 !important;}
div#navcontainer ul li.darkblue ul li a {background:#1B2768; color:#9092B0 !important;}
div#navcontainer ul li.magenta ul li a {background:#CC2D88; color:#D399C0 !important;}
div#navcontainer ul li.lightblue ul li a:hover,
div#navcontainer ul li.green ul li a:hover,
div#navcontainer ul li.limegreen ul li a:hover,
div#navcontainer ul li.grey ul li a:hover,
div#navcontainer ul li.darkblue ul li a:hover,
div#navcontainer ul li.magenta ul li a:hover {
    color:#fff !important;
}

这里是导航 HTML：

<div id="navcontainer">
  <ul id="mainnav" class="nav">
    <li class="magenta<?php echo $selected['home']; ?>"><a href="/">Home</a></li>
    <li class="lightblue<?php echo $selected['location']; ?>"><a href="/location">Location</a>
      <ul>
        <li><a href="/location/area/travel">Travel</a></li>
        <li><a href="/location/area/parks">Parks</a></li>
        <li><a href="/location/area/shops">Shops</a></li>
        <li><a href="/location/area/leisure">Leisure</a></li>
        <li><a href="/location/area/eatdrink">Eat &amp; Drink</a></li>
      </ul>
    </li>
    <li class="green<?php echo $selected['specification']; ?>"><a href="/specification">Specification</a>
      <ul>
        <li><a href="/specification/area/general">General</a></li>
        <li><a href="/specification/area/kitchen">Kitchen</a></li>
        <li><a href="/specification/area/bedroom">Bedroom</a></li>
        <li><a href="/specification/area/bathroom">Bathroom</a></li>
      </ul>
    </li>
    <li class="limegreen<?php echo $selected['plans']; ?>"><a href="/plans">Plans</a>
      <ul>
        <li><a href="/plans/area/1bed">1 Bedroom Apartments</a></li>
        <li><a href="/plans/area/2bed">2 Bedroom Apartments</a></li>
      </ul>
    </li>
    <li class="grey<?php echo $selected['gallery']; ?>"><a href="/gallery">Gallery</a>
      <ul>
        <li><a href="/gallery/area/gallery">View Gallery</a></li>
      </ul>
    </li>
    <li class="darkblue<?php echo $selected['about-us']; ?>"><a href="/about-us">About Us</a></li>
    <li class="magenta<?php echo $selected['contact-us']; ?>"><a href="/contact-us">Contact Us</a></li>
  </ul>
</div>

我有一些 jQuery 来为悬停的 LI 添加一个类，因为 IE7

$("div#navcontainer ul li").mouseenter( function() { $(this).addClass("sfHover"); } ); 
$("div#navcontainer ul li").mouseleave( function() { $(this).removeClass("sfHover"); } );

谁能帮我弄清楚为什么这在 IE 中不起作用？

谢谢

斯科特

Answer 1

IE7 的堆叠顺序与其他浏览器不同。添加z-index:2 到#header 和z-index:1 到#content。这将为您提供与 IE8 和 9 相同的结果。

该结果是由 li 之间的空格引起的。如果您移动得足够快，您可以选择较低的项目。我现在正在寻找解决办法。

编辑

并非 100% 这适用于所有浏览器，但您可以这样做： 通过向下拉列表 ul 添加背景颜色可以轻松解决该问题。我认为这是不可取的，所以你可以做的是添加一个 1px x 1px 透明 gif 的背景（应该是一个小文件......），这将解决问题并保持美感

有点小技巧，但 IE 就是那种浏览器！很惊讶它在 IE9 中不起作用

希望对你有帮助

编辑

我认为 IE6 的问题在于您的 javascript。 尝试在选择器中使用“>”。这将获得元素的直接子元素（如下面的示例所示）。这样，当您将鼠标悬停在下拉部分列表之一时，您的函数将不会触发。或者试试这段代码（完全未经测试，肯定需要改进）：

$("div#navcontainer > ul > li").mouseenter( function() { $(this).addClass("sfHover"); } ); 
$("div#navcontainer > ul > li > ul").mouseleave( function() { $(this).parent().removeClass("sfHover"); } );

由于定位从文档流中移除 ul，这也可能导致它提前触发。