0

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

4

1 回答 1

3

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

编辑：

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

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

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

于 2012-12-08T11:44:46.833 回答