2

次のメニューがあり、以下のCSSを使用すると、その下に小さな矢印が表示されますが、矢印が存在する場合にのみ矢印を表示したいと思いますli.subnav

CSS

.nav li: hover {
    background: url(.. / img / template / nav - hover.png) no - repeat bottom center;
}

HTML

<div class="nav">
    <ul>
        <li><a href="#">Services</a>

            <div class="subnav">
                <ul>
                    <li><a href="#">menu item</a>
                    </li>
                    <li><a href="#">menu item</a>
                    </li>
                </ul>
            </div>
        </li>
        <li><a href="/companies">Companies</a>

            <div class="subnav">
                <ul class="companylist1">
                    <li><a href="#">1</a>
                    </li>
                    <li><a href="#">2</a>
                    </li>
                </ul>
            </div>
        </li>
        <li><a href="/locations">Locations</a>
        </li>
        <li><a href="/news">News</a>
        </li>
        <li><a href="/contact">Contact</a>
        </li>
    </ul>
</div>
4

6 に答える 6

1

div.subnav に絶対位置がある場合は、アンカーの前に置くだけです:

<li>
    <div class="subnav">
        <ul class="companylist1">
            <li>
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
        </ul>
    </div>
    <a href="/companies">Companies</a>
</li>

その後：

div.subnav + a {...}

また：

div.subnav + a:hover {...}

http://jsfiddle.net/coma/2ZBnY/

于 2013-08-28T08:26:20.200 に答える
0

純粋な css でこれを行う唯一の方法は、「subnav」コンテナの内側に矢印を配置することです。しかし、jquery を使えば簡単に実現できます。

if ($(".nav li .subnav").length > 0)) {
    // .. set background
}
于 2013-08-28T08:25:04.460 に答える
0

私の知る限り、これは CSS だけでは不可能です。最善の策は、子<li>を持つ 2 つの s にクラスを追加すること.subnavです。

于 2013-08-28T08:25:08.623 に答える
0

CSS でステートメントを作成できないためif、これを javascript/jQuery で追加するか、工夫する必要があります...

項目内に疑似要素 (または実際の HTML 要素) を使用して下向き矢印を作成し.subnav、それを .subnav の完全に外側に配置して、親の li 項目内にあるように見せることをお勧めします。

これにより、サブナビが存在する場合にのみ矢印が表示されます。ただし、.subnav を表示/非表示にする方法をいじる必要があります。これは、設定display:none;によって矢印が表示されないことも明らかであるためです。

于 2013-08-28T08:25:56.933 に答える
0

CSS で条件を作成することはできませんが、別の方法で操作できる場合があります。

.subnav代わりにクラスで画像を表示するのはどうですか? の下部中央ではなく、上部中央に配置しliます。

セレクターは画像のようなもの.nav li > .subnav:hoverになります。

于 2013-08-28T08:26:16.020 に答える