仅显示子元素的CSS菜单[关闭]

Question

我有这个简单的响应式CSS菜单。它有一个760px的断点，现在我有一个小难度。难度是当菜单高于760px时（请展开小提琴结果以查看）。

这是小提琴：Fiddle menu

现在看看当你将鼠标悬停在第一个a（比如你将鼠标悬停在主页上）时，你会注意到li或a扩展，我不知道为什么。我在网上经历了很多代码而且我不明白为什么，这种扩展是在悬停时触发的。

实际上菜单代码是部分copied from this tutorial，在上面的例子中，菜单工作正常，但不在我的（不幸的是，你没有地方可以下载教程的源代码）。

那么，为什么菜单会扩大？

以下是我的菜单的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。但我还是想让别人解释一下，为什么菜单会扩大？

注意

请确保展开小提琴结果视图，一旦看到li左侧浮动，则只悬停在任何给定的下拉列表上。

Answer 1

正如Shyam Babu Kushwaha所说，如果你把它添加到CSS中，他提到的代码实际上是正常工作的。

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

对于你的问题，但我仍然希望有人来和解释，为什么菜单扩大？

基本上发生了什么（即使我们没有在Firebug中看到它 - 来自Firefox的HTML / 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;
}