Internet Explorer 出现 sukerfish 下拉菜单问题

Question

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

我所引用的导航可以在这里找到： http://lt.philosophydesign.com/

它有效并且在 Firefox/Safari/Chrome 中显示良好。 它在 IE9 和 IE8 中显示良好，但是当您尝试导航到下拉列表中的第一项时，下拉列表会消失。 在 IE7 和 IE6 中，下拉列表显示在主体内容后面。

奇怪的是，如果我删除

的内容，导航将在 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<不支持 :hover 在 A 标签以外的任何标签上。

$("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，这也可能导致它提前触发。