Html 不完全悬停在链接上

我正在为网页创建一个垂直下拉菜单。当我将鼠标悬停在链接上时，它可以正常工作并按指定更改颜色。但当我在李的子级别列表（代码中的一些文本b和c）上向右移动时，它又回到了原来的颜色。 我如何解决这个问题

HTML标记：

<div id="vertical-menu">
    <ul class="top-level">
        <li><a href="#">Some text A</a></li>
        <li>
            <a href="#">Some text B</a>
            <ul class="sub-level">
                <li><a href="#">RSVP</a></li>
                <li><a href="#">Organizing Team</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Some text C</a>
            <ul class="sub-level">
                <li><a href="#">Events</a></li>
                <li><a href="#">Reunions</a></li>
            </ul>
        </li>
    </ul>
</div>​

要在JSFIDLE上查看演示：

使用

#垂直菜单li:hover>a

而不是

#垂直菜单a:hover

（）

编辑： 这里您真正的问题是子菜单与基本菜单重叠-您需要从ULs中删除填充/边距：

.vertical-menu ul { margin: 0; padding: 0; }

并调整

左：171px至<代码>左侧：250px

使用

#垂直菜单li:hover>a

而不是

#垂直菜单a:hover

（）

编辑： 这里您真正的问题是子菜单与基本菜单重叠-您需要从ULs中删除填充/边距：

.vertical-menu ul { margin: 0; padding: 0; }

并调整

左：171px至<代码>左侧：250px