與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。