CSS3-HTML导航列表背景问题

我目前在我的高中最后一年，我需要做一个基本的网站。 不过，我在创建下拉导航列表时遇到了麻烦。 它工作得很好，但我不知道如何使它这样，如果你滚动其中一个子项，悬停项的背景覆盖整个项目

那句话很奇怪，我对这个很陌生

我已经用这个JSFIDLE工具来描述这个问题

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

请查看JSFIDLE链接，以获得我的问题的最佳示例

这是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>

---

感谢您签出它

您需要删除子菜单列表项的左浮动，例如

#menu li li {float:none;}

查看更新的代码，更新：向问题添加了一个类

.sub

#menu li li {float:none;}