html - CSS3 - HTML Navlist 背景问题

Question

我目前在读高中最后一年，我需要制作一个基本网站。 不过，我在创建下拉导航列表时遇到了瓶颈。 它工作得很好，但我不知道如何做到这一点，如果您滚动其中一个子元素，悬停元素的背景会覆盖整个元素。

那句话很奇怪，我对此很陌生。

我用这个 jsfiddle 东西来描绘问题，http://jsfiddle.net/5EbSv/5/ .

在第二个列表项上，您可以看到前两个列表项在悬停时没有完全覆盖背景。

查看 jsfiddle 链接以获得我的问题的最佳示例。

这是 HTML:

<div class="navlist">
    <ul id="menu">
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item2</a>
            <ul>
                <li><a href="#">SubItem1</a></li>
                <li><a href="#">SubItem2</a></li>
                <li><a href="#">Making an example</a></li>
            </ul>
        </li>
        <li><a href="#">Item3</a>
            <ul>
                <li><a href="#">SubItem1</a></li>
                <li><a href="#">SubItem2</a></li>
                <li><a href="#">SubItem3</a></li>
                <li><a href="#">SubItem4</a></li>
                <li><a href="#">SubItem5</a></li>
            </ul>
        </li>
        <li><a href="#">Item4</a></li>
    </ul>
</div>

这是CSS:

#menu a{
   color: #0070A2;
}

#menu, #menu ul {
    margin:0 auto;
    padding:0;
}

#menu {
    display: inline-block;
    list-style:none;
}

#menu li {
    font-size: 14px;
    background: #292A2C;
    float: left;
    position: relative;
    list-style: none;
}

#menu > li:hover > ul {
    display: block;
}
#menu > li > ul {
    display: none;
    position: absolute;
    background: #292A2C;
    color: white;
}

#menu li a {
    display:block;
    padding:10px 10px;
    text-decoration:none;
    font-weight:bold;
    white-space: nowrap;
}

#menu li a:hover {
    color: white;
    background: grey;
}

感谢您的关注

Answer 1

您需要移除子菜单列表项的左侧 float ，例如

#menu li li {float:none;}