2

我正在尝试创建一个左手导航并将它靠近我需要它的地方，除了一个问题。

看看这个Fiddle中的例子。

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

基本上，我希望子元素在整个容器中将边框延伸到边框。也许 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;
}
4

3 回答 3

2

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;
}
于 2013-03-21T17:28:47.973 回答
1

更改包装内部链接类。所以它在悬停时不会改变背景。

http://jsfiddle.net/btevfik/LZqud/6/

   <li class="innerlink">
        <ul>
            <li class="link">Open</li>
            <li class="link">Closed Closed Closed Closed</li>
        </ul>
    </li>

CSS

.nav li.innerlink {
background-color: #ECE9D8;
}
于 2013-03-21T17:22:46.740 回答
1

就这么简单，如下图替换最后一块CSS，

从：

.nav ul li ul {
    padding-left: 10px;
}

到：

.nav ul li ul li{
    margin-left: -10px;
    padding-left: 20px;
}

希望这是你需要的..

于 2013-03-21T17:34:59.720 回答