擴展CSS元素的菜單顯示子元素

Question

嘿傢伙我有這個簡單的CSS菜單，我已經在它上面工作了一段時間，它的響應也是。它有一個760px的單個斷點，現在我有一個小難度，難度是當菜單高於760px（請展開小提琴結果以查看我在說什麼）。

繼承人的小提琴：fiddle menu

現在看到當u懸停在第一一（說妳將鼠標懸停在家裏），日子會把你發現，李或膨脹，我不知道爲什麼，我已經經歷了很多在線代碼，我不明白爲什麼，這種擴展是在懸停時觸發的。

實際上菜單代碼部分從這裏複製：tutorial link

，並在上面的例子中，菜單正常工作，而不是我的，但（不幸的是世界上沒有其他地方，你可以下載嘖嘖源）。

那麼，這是我唯一的問題，爲什麼菜單擴大？

下面是我的菜單的HTML代碼：

<label for="showmenu">Show Menu</label> 
     <input type="checkbox" id="showmenu" role="button"> 
     <ul id="menu"> 
      <li><a href="#">Home</a> 
       <ul class="hidden"> 
        <li><a href="#">Banner</a></li> 
        <li><a href="#">Logo</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">About us</a> 
      </li> 
      <li><a href="#">Home</a> 
       <ul class="hidden"> 
        <li><a href="#">Banner</a></li> 
        <li><a href="#">Logo</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">About us</a> 
      </li> 
      <li> 
       <a href="#">About us</a> 
      </li> 
     </ul> 

一個黑客雖然，因爲我發現是添加position:absolute父ul。但我仍然喜歡有人來解釋，爲什麼菜單不斷擴大？我用盡了我的常識，我無法理解。

注意::請確保你展開小提琴結果視圖，一旦你看到李的左浮動，然後只能懸停在任何給定的下拉李。

謝謝。

Alexander。

Answer 1

正如希亞姆·巴布Kushwaha說的話，他mentionned的代碼實際上是正常工作，如果你把它添加到你的CSS。

ul li a + ul li { 
    float: none; 
    margin-right:0; 
} 

對於您的問題，但我還是很喜歡有人一起去解釋，爲什麼在菜單展開？

基本上發生的事情（儘管我們沒有看到它裏面螢火蟲 - 從FirefoxHTML/CSS調試），它是正在申請第二次（這就是爲什麼它1px的擴大）以下代碼..

ul li { 
    float: left; 
    margin-right: 1px; 
} 

上述代碼來自：Shyam Babu Kushwaha將糾正你的問題。

Answer 2

，請更新以下CSS聲明：

ul li a + ul li { 
    float: none; 
    margin-right:0; 
}