IE導航下拉菜單不會顯示，因爲它應該

Question

我已經在html中創建了一個下拉導航。然後我用不同的瀏覽器（如chrome，firefox，opera和IE）對它進行測試。我看到的唯一問題是導航無法在IE中正確顯示。

HTML：

<div id="nav_bar"> 
    <ul id="nav"> 
     <li><a href="index.html" title="Go to our Home Page.">Home</a></li> 

     <li><a href="#">Krazie</a> 
      <ul> 
       <li><a href="krazie/colour.html" title="Go to Krazie's Colour portfolio.">Colour</a></li> 
       <br /> 
       <li><a href="krazie/black.html" title="Go to Krazie's Black 'N' Grey portfolio.">Black 'N' Grey</a></li> 
      </ul> 
     </li> 
<!-- End of Krazie links -->    
     <li><a href="#">Stacy</a> 
      <ul>  
       <li><a href="stacy/colour.html" title="Go to Stacy's Colour portfolio.">Colour</a></li> 
       <br /> 
       <li><a href="stacy/black.html" title="Go to Stacy's Black 'N' Grey portfolio.">Black 'N' Grey</a></li> 
      </ul> 
     </li> 
<!-- End of stacy links -->   
     <li><a href="#">Matt</a> 
      <ul>  
       <li><a href="matt/colour.html" title="Go to Matt's Colour portfolio.">Colour</a></li> 
       <br /> 
       <li><a href="matt/black.html" title="Go to Matt's Black 'N' Grey portfolio.">Black 'N' Grey</a></li> 
      </ul> 
     </li> 
<!-- End of matt links -->   
     <li><a href="contact.html" title="Go to our Contact page.">Contact</a></li> 
    </ul> 
</div> 

CSS：

#nav 
{ 
    margin-top:-0px; 
    background:rgb(108,108,108); 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:10; 
    width:100%; 
    z-index:9003; 
    height:32px; 
    list-style:none; 
    color:#FFF; 
} 

#nav li 
{ 
    float: left; 
    list-style:none; 
} 

#nav li a 
{ 
    display: block; 
    height:2em; 
    line-height:2em; 
    padding:0px 10px; 
    text-decoration:none; 
    list-style:none; 
    color:#FFF; 
} 

#nav ul 
{ 
    padding:0px; 
    margin-left:-20px; 
    background:rgb(108,108,108); 
    position:absolute; 
    display:none; 
    z-index:9003; 
    list-style:none; 
} 

#nav ul li a 
{ 
    padding:-50px; 
    width:110px; 
    list-style:none; 
} 

#nav li:hover ul 
{ 
    display:block; 
    list-style:none; 
} 

#nav > li:hover > a 
{ 
    background:rgb(108,108,108); 
} 

#nav ul li:hover a 
{  
    background:rgb(48,48,50); 
} 

不正確顯示的一點是，你看，當你把鼠標放在他們的實際鏈接。這是它如何顯示在其他瀏覽器如鉻：http://grab.by/e5ik 但在IE它顯示爲：http://grab.by/e5im

Answer 1

您的代碼似乎太複雜，無法完成您的工作。

順便說一句，請刪除HTML中的<br />。

然後，添加下面的CSS：

（#nav ul之間#nav ul li a）

#nav ul li { 
    clear: both; 
} 

（在IE8測試）

請在瀏覽器中是否發生任何錯誤再次檢查。

Answer 2

變化這 -

#nav ul li a 
{ 
    padding:-50px; 
    width:110px; 
    list-style:none; 
}  
#nav li:hover ul 
{ 
    display:block; 
    list-style:none; 
} 

#nav > li:hover > a 
{ 
    background:rgb(108,108,108); 
} 

#nav ul li:hover a 
{  
    background:rgb(48,48,50); 
} 

到這 -

#nav ul li a 
{ 
    padding:-50px; 
    width:110px; 
    list-style:none; 
    display:block 
}  
#nav a:hover ul 
    { 
     display:block; 
     list-style:none; 
    } 

    #nav > li > a:hover 
    { 
     background:rgb(108,108,108); 
    } 

    #nav ul li a:hover 
    {  
     background:rgb(48,48,50); 
    } 

有時即不能識別懸停在元件除了a元件。