0

次のように、マークアップを使用してナビゲーション メニューを作成しようとしています。

<ul id="ul1">
        <li><a href="#">Link 1</a>
            **<div>**
                <p>SOME STUFF</p>
                <ul>
                    <li><a href="#">Link 1.1</a><**div** class="innerdiv"></div></li>
                    <li><a href="#">Link 1.2</a><**div** class="innerdiv"></div></li>
                    <li><a href="#">Link 1.3</a><**div** class="innerdiv"></div></li>
                    <li><a href="#">Link 1.4</a><**div** class="innerdiv"></div></li>
                </ul>
            </div>
        </li>
        .
        .(WITH MORE <LI>'S OFC :))
        .
</ul>

ここで、リンク 1 にカーソルを合わせたときに外側の div が表示されるようにしたいと考えています...これは、CSS を使用して簡単に実行できます。

#navbar ul li div
{
    min-width:500px;
    min-height:130px;
    background-color:#dfdfdf;
    position:absolute;
    left:0px;
    top:32px;
    visibility:hidden;
}

#navbar ul li:hover div
{
    visibility:visible;
}

次に、リンク 1.1、1.2 などの内部リンクにカーソルを合わせたときにのみ内部 div が表示されるようにします。外側の div から css を継承する div ...つまり、外側のリンクにカーソルを合わせると、内側の DIV の動作が変化しすぎて、これは望んでいないことです...私の言いたいことが理解できれば..

外側のリンク (リンク 1、2、3) にカーソルを合わせたときに外側の DIV が表示され、内側のリンク (リンク 1.1、1.2、1.3) にカーソルを合わせたときに内側の DIV が表示されるようにしたい NAVMENU のスクリーンショット

メニューのスクリーンショット: これは紛らわしいです...内側のdivを具体的に選択する方法を教えてください。または、JSまたはJqueryを使用して回避策を教えてください....現在、セレクターを使用しています

#navbar ul li div ul li div , and
#navbar ul li div ul li a:hover div
4

2 に答える 2

1

div が最初に表示されない場合:

#navbar div {
  display: none;
}

LIコンテナがホバーされたときにそれらを見えるようにすることができます：

#navbar li:hover > div {
  display: block;
}

>演算子は直接の子孫を選択するために使用されるため、ここでは、現在ホバーされている の直接の子ノードである要素のみがdiv表示liされます。詳細情報: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

于 2013-08-27T09:57:33.803 に答える
0

リスト項目の可視性を変更するだけです。

ウルリウルリ{ .... }

さらに、「navbar」ID がどこにも表示されませんか? どちらでもない..

于 2013-08-27T09:59:09.790 に答える