CSS Drop Down DIV Menu ...爲什麼我的鏈接會打破它？

Question

好吧，我正在構建一個類似於ESPN網站上的CSS下拉菜單。一切都很順利，但是當我把一個鏈接放入下拉div時，它就會崩潰。在Firefox中，下拉div現在會更長，並且在資源管理器中會出現，但列表中鏈接的列表中的所有元素都會消失。任何想法/建議？

btw我在這裏是新的...一直在尋找修復在stackoverflow永遠，但從來沒有實際上不得不問自己，直到現在。提前致謝！

下面是HTML，注意列表中的一個鏈接。 Withought subnav div中的任何鏈接一切都很完美。隨着鏈接斷開。

<ul id="topnav"> 
    <li><a class="top" href="#"> 
     <div class="button">Home</div> 
     </a> 
    </li> 
    <li><a class="top" href="#"> 
     <div class="button">Programs</div> 
     <div class="subnav"> 
      <ul class="mainlinks"> 
       <li><a href="#">Recreational</a></li> 
       <li>TESTING</li> 
       <li>TESTING</li> 
       <li>TESTING</li> 
       <li>TESTING</li> 
      </ul> 
     </div> 
     </a> 
    </li> 
</ul> 

而這裏的CSS：

#topnav { 
width: 800px; height: 30px; 
margin: 0 auto; padding: 0 0 0 160px; 
list-style: none; 
} 
#topnav li { 
position: relative; 
} 
#topnav li a.top { 
color: #FFFFFF; 
font-size: 0.75em; 
font-weight: bold; 
text-decoration: none; 
} 
#topnav li a.top .button { 
position: relative; 
z-index: 998; 
display: inline; 
float: left; 
height: 18px; 
padding: 6px 30px; 
} 
#topnav li a.top:hover {} 
#topnav li a.top:hover .button { 
color: #000000; 
background-color: #FFFFFF; 
-moz-box-shadow: 0 0 10px -1px #000000; 
-webkit-box-shadow: 0 0 10px -1px #000000; 
box-shadow: 0 0 10px -1px #000000; 
} 
#topnav li .subnav { 
display: none; 
position: absolute; 
z-index: 999; 
width: 960px; 
top: 30px; left: -160px; 
background-color: #FFFFFF; 
color: #000000; 
border-bottom: solid 5px #990000; 
} 
#topnav li a.top:hover .subnav { 
display: block; 
} 
#topnav li .subnav ul.mainlinks { 
width: 150px; 
list-style: none; 
padding: 20px; 
} 

我認爲它可能有一些做的topnav的主要環節，所以我說「頂」級到他們，但沒有幫幫我。本來我只是有它

#topnav li a .subnav 

Answer 1

嵌套的，我不認爲這是問題，但我可以看到的第一件事情是，你有一個錨標記左右兩個div包裹着你的子菜單

<li><a class="top" href="#"> 
    <div class="button">Programs</div> 
    <div class="subnav"> 
     <ul class="mainlinks"> 
      <li><a href="#">Recreational</a></li> 
      <li>TESTING</li> 
      <li>TESTING</li> 
      <li>TESTING</li> 
      <li>TESTING</li> 
     </ul> 
    </div> 
    </a> 
</li> 

<li><a class="top" href="#"> 
    <div class="button">Programs</div> 
    </a> ***************************** MOVED CLOSING TAG HERE 
    <div class="subnav"> 
     <ul class="mainlinks"> 
      <li><a href="#">Recreational</a></li> 
      <li>TESTING</li> 
      <li>TESTING</li> 
      <li>TESTING</li> 
      <li>TESTING</li> 
     </ul> 
    </div> 
</li> 

就問題而言，我會說重複檢查a的所有樣式，並驗證沒有什麼會發生衝突。