与sukerfish下拉菜单的Internet Explorer问题

Question

Im只有在IE中的下拉菜单的问题，我得到不同的结果不同的版本。

我reffering的导航在这里找到：http://lt.philosophydesign.com/

它的工作原理，并显示在Firefox/Safari /铬的罚款。 在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来添加一个类徘徊李为IE7 <犯规支持：悬停在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。我认为这是不可取的，所以你可以做的是添加一个1像素，1像素透明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。