Question

我正在为网页创建一个垂直下拉菜单。当我将鼠标悬停在链接上时，它工作正常并按指定更改颜色。但是当我向李的右侧列表（代码中的“某些文字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>

CSS样式：

#vertical-menu {
    padding: 10px 0;
    margin: 0 -14px;
    width: 250px;
}
#vertical-menu li {
    list-style: none;
    position:relative;
}
#vertical-menu a {
    padding: 10px;
    margin-right: 0;
    display: block;
    background: -webkit-gradient(linear, left top, left bottom, from(#CD0000),           to(#8B0000));
    color: #FFFFFF;
    font-size: 1.05em;
}
#vertical-menu a:hover {
    background: url("Wood Texture 2.jpg") 100% 100%;
    color: #8B0000;
}
ul.sub-level {
    display:none;
    position:absolute;
    left:171px;
    top: 0;
}
.sub-level a {
    width: 200px;
}
li:hover .sub-level {display: block;}

要在jsfiddle上查看演示：http://jsfiddle.net/fFzeS/

Answer 1

使用#vertical-menu li:hover > a代替#vertical-menu a:hover（demo）

编辑：

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

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

并将left:171px;调整为left:250px;

不完全悬停在链接上

1 个答案:

编辑：