2

左側のナビゲーションを作成しようとしていますが、1 つの問題を除いて、必要な場所の近くに配置します。

このFiddleの例を見てください。

「リンク」アイテムの上にマウスを移動すると、セルの色が変わります。しかし、二次項目にカーソルを合わせると、外側の親 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

これと同じくらい簡単に、以下に示すように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 に答える
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 に答える