扩展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; 
}