嵌套列表在IE中不能正確顯示

Question

我有一個基於CSS的導航元素，它可以下拉子類別，然後水平地在下面運行它們。就像這樣：

當在主項的用戶移動鼠標，它會顯示一個銀色背景，當過subnav項目的用戶移動鼠標，它變成琥珀色。它也顯示在活動頁面上。

名單的典型方式結構：

<div id="cv-nav"> 
    <ul> 
     <a href="#"><li>Item 1</li></a> 
     <a href="#"><li>Item2 
      <ul> 
       <li><a href="#">Item 2a</a></li> 
       <li><a href="#">Item 2b</a></li> 
      </ul> 
     </li></a> 
     <a href="#"><li>Item 3</li></a> 
     <ahref="#"><li>Item 4 
      <ul> 
       <li><a href="#">Item 4a</a></li> 
       <li><a href="#">Item 4b</a></li> 
      </ul> 
     </li></a> 
     <a href="#"><li>Item 5</li></a> 
    </ul> 
</div> 

而CSS使一切正常工作：

#cv-nav { 
    background-image: url("nav-background"); 
    background-position: left top; 
    background-repeat: no-repeat; 
    height: 50px; 
    position: absolute; 
    top: 165px; 
    width: 1024px; 
} 
#cv-nav ul { 
    height: 50px; 
    position: relative; 
    width: 1024px; 
} 
#cv-nav ul li { 
    float: left; 
    height: 50px; 
    margin: 0 1px; 
    padding: 0; 
    text-align: center; 
} 
#cv-nav ul a li, #cv-nav ul li a { 
    color: #D0D2D2; 
    text-transform: uppercase; 
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif; 
    font-size: 12px; 
    letter-spacing: 1px; 
    line-height: 50px; 
} 
#cv-nav ul li:hover ul li a { 
    color: #D0D2D2; 
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif; 
    text-transform: uppercase; 
    font-size: 12px; 
    letter-spacing: 1px; 
    line-height: 30px; 
} 
#cv-nav ul li:hover, #cv-nav ul a li:hover, #cv-nav ul li.active { 
    background-image: url("silver-button"); 
    background-position: left top; 
    background-repeat: repeat-x; 
} 
#cv-nav ul li ul li:hover { 
    background: none; 
} 

#cv-nav ul li:hover a, #cv-nav ul a li:hover, #cv-nav ul li:hover p, #cv-nav ul li.active a, #cv-nav ul a li.active, #cv-nav ul li.active p { 
    color: #4f4f51; 
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif; 
    text-transform: uppercase; 

} 

#cv-nav ul li ul li a:hover, #cv-nav ul li ul.active li a:hover, #cv-nav ul li ul.active li.active, #cv-nav ul li ul.active li.active a { 
    color: #FAB631; 
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif; 
    text-transform: uppercase; 
    background:none; 
} 

#cv-nav ul li ul { 
    display: none; 
    clear: both; 
} 

#cv-nav ul li:hover ul, #cv-nav ul li.hover ul, #cv-nav ul li ul.active { 
    display: inline; 
    height: 30px; 
    left: 0; 
    margin: 0; 
    padding: 0 0 0 40px; 
    position: absolute; 
    top: 50px; 
    width: 984px; 
    background-image: url("subnav-background"); 
    background-position: left top; 
    background-repeat: repeat-x; 
} 
#cv-nav ul li ul li{ 
    position:relative; 
    float:left; 
} 

#cv-nav ul li ul li, #cv-nav ul li ul li a, #cv-nav ul li ul.active li, #cv-nav ul li ul.active li a { 
    color: #D0D2D2; 
    float: left; 
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif; 
    font-size: 12px; 
    height: 30px; 
    letter-spacing: 0.1em; 
    margin: 0; 
    padding: 0px 10px 0 0; 
    text-transform: uppercase; 
    line-height: 30px; 
}​ 

在IE瀏覽器，但瀏覽器將嵌套<ul> S作爲又一個<li>，並漂浮在旁邊的項目：

您可以看到subnav元素的位置和樣式是（正確），但嵌套<ul>不應該是它自己的按鈕。我已經嘗試在#cv-nav ul li ul元素中添加clear:both;屬性，但無濟於事。

這一定很簡單，我忽略了。任何援助表示讚賞。

這裏是一個小提琴：http://jsfiddle.net/tylonius/AD7VL/

TY

Answer 1

我發現了問題：

客戶希望整個<li>元素可以點擊，而不僅僅是標籤。對於其中沒有嵌套列表的元素，它工作正常。然而，對於那些做過的人來說，讓他們全都在一個單一的元素中混淆IE。

將<a>圍繞標籤移動解決了問題。