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

注意

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

Answer 1

请更新以下css声明：

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

Answer 2

正如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将纠正您的问题。

仅限CSS菜单展开子元素

注意

2 个答案: