2

ナビゲーションのスタイリングを行っています。このナビゲーションにはサブメニューのドロップダウンがあり、そのドロップダウン内に2番目のドロップダウンが表示される可能性があります。本質的に、私はサブナビゲーションアイテムの2つの層を持っています。

これが私の問題です。最も外側の親アイテムにホバー状態があります。これを「AboutUs」と呼びましょう。その下のドロップダウンメニューに追加のリンクが表示されます。マウスをこのドロップダウンに移動すると、それらのリンクに対して別のホバー状態がアクティブになります。私の問題は、「AboutUs」リンクのホバーステートが消えることです。そのホバー状態をアクティブに保ちたい。これまでのところ、このナビゲーションは純粋にCSSで行われており、JavaScriptは使用されていません。可能であれば、CSSを完全に使用したいと思います。

各ULにはクラスがあります。たとえば、親ULの場合は.main-nav、subnav要素の場合は.main-sub-navです。

創造性を発揮しようとして、たとえば次のように言うことができると思いました（この例では、＃cccが親のホバー状態のハイライトカラーであると想定しています。

.main-nav li a:hover {background: #ccc;}    
.main-sub-nav li a:hover .main-nav li a {background: #ccc;}

これは機能しません。子要素から親要素を参照しようとしているため、何をしているのか理解できません。これを達成するために私が上で行っているのと同様の方法はありますか？

サンプルHTML構造：

<nav>
    <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul class="main-sub-nav">
                <li><a href="#">About Sub 1</a></li>
                <li><a href="#">About Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

このコードは、次の開発サイトで完全に確認できます：http: //khill.mhostiuckproductions.com/siteLSSBoilerPlate/

[About us]にカーソルを合わせ、マウスをサブナビゲーションに移動すると、[Aboutus]のハイライトが消えます。

私が言ったように、私は純粋にCSSで、できれば何にもクラスを追加せずにこれを解決したいと思います。このナビゲーションはPHPで完全に生成され、クラスを追加すると厄介になるため、これは複雑になります。

4

1 に答える 1

3

これで問題は解決すると思いますが、

.main-nav > li:hover > a {background: #ccc;}

デモ

于 2013-01-24T17:24:03.267 に答える