html - 尝试创建 CSS 导航并遇到子元素问题

Question

除了一个问题，我正在尝试创建一个左手导航并使其靠近我需要的位置。

看看这个 Fiddle 中的例子.

当鼠标悬停在“链接”项上时，单元格会改变颜色。但是当它悬停在次要元素上时，外部父级 li 也会改变颜色。我意识到这是因为外里也有一个“链接”类，但是如果我把那个类去掉，那么背景就不正确了。

基本上，我希望子元素在整个容器中将边框拉伸(stretch)到边框。也许 ul 列表不是我想要实现的目标的适当控制？

感谢任何帮助。

HTML

<div class="nav">
    <ul>
        <li class="link active">Home</li>
        <li class="link">Profile</li>
        <li class="navhead">Messages</li>
        <li class="link">
            <ul>
                <li class="link">Open</li>
                <li class="link">Closed Closed Closed Closed</li>
            </ul>
        </li>
    </ul>
</div>

CSS

ul {
    -webkit-padding-start: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
.nav {
    font-family:Verdana;
    font-size:12px;
    width:200px;
}
.nav {
    background-color: #F3E0A3;
    cursor: default;
    border: 1px solid #d2b48c;
    border-collapse:collapse;
}
.nav li.navhead {
    background-color: #F3E0A3;
    border: 1px solid #d2b48c;
    border-collapse:collapse;
}
.nav ul {
    list-style-image: none;
    list-style-position: outside;
    list-style: none;
}
.nav li {
    margin: 0;
    padding: 0;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav li .active {
}
.nav li.link {
    background-color: #ECE9D8;
}
.nav li.link:hover {
    cursor: pointer;
    background-color: #e1dfd2;
}
.nav ul li ul {
    padding-left: 10px;
}

Answer 1

http://jsfiddle.net/LZqud/7/

HTML:

<li class="link link-with-sub">
        <ul class="sub">
            <li class="sublink">Open</li>
            <li class="sublink">Closed Closed Closed Closed</li>
        </ul>
    </li>

CSS:

 .nav li.link {
    background-color: #ECE9D8;
}
.nav ul li ul.sub {
    margin-left: -10px;
    padding-left:0;
}
.nav ul li ul.sub li {
    padding-left: 20px;
}
.nav li.link:hover, .nav ul.sub li.sublink:hover {
    cursor: pointer;
    background-color: #e1dfd2;
}
.nav li.link, .nav li.link-with-sub:hover {
    background-color: #ECE9D8;
}