仅CSS菜单在子元素显示时展开

我有一个简单的CSS菜单。它有一个760像素的单断点，现在我有一个小困难。困难在于菜单高于760像素（请展开小提琴结果查看）

这是小提琴：

现在看，当你在第一个a上悬停时（假设你在home上悬停），你会注意到li或a会扩展，我不知道为什么。我在网上浏览了很多代码，但我不明白为什么，这种扩展是在hover上触发的

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

那么，为什么菜单会扩展呢

下面是我的菜单的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

。但我还是希望有人解释一下，为什么菜单会扩大

注

---

请确保展开fiddle results视图，一旦看到li向左浮动，则只将鼠标悬停在任何给定的下拉列表li上

请更新以下css声明：

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

---

正如Shyam Babu Kushwaha所说，如果您将其添加到CSS中，他提到的代码实际上工作正常

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

谢谢你的提问，但我还是希望有人过来解释一下，为什么菜单在扩大

基本上发生了什么（尽管我们在Firefox的Firebug-HTML/CSS调试中没有看到），下面的代码第二次应用（这就是为什么它会扩展1px）

---

以上代码来自：Shyam Babu Kushwaha将纠正您的问题。

！我想知道为什么我的代码不起作用，而不是如何使它起作用。谢谢。你可以从我的答案中找到它。您在li中声明了1px右边距，因此它也影响子菜单中的li，并增加了父宽度1px。这就是原因。1px非常重要。Alexander不要删除它，这是每个菜单之间1px线的原因，但当你将鼠标悬停在“菜单”上时，它将“重新应用”，我只是在li的子菜单ul中删除它。@ShyamBabuKushwaha非常感谢，你也是psyTor。嘿，Alex，你是说“家”吗按钮比原来的尺寸扩大一点？@pSyToR:D这就是我要说的。看下面我的答案，这是一个相同CSS代码的“双重”应用程序

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