0

順序付けされていないリスト（<ul>）、リストアイテム（<li>）、アンカー（<a>）を参照する2つの異なる方法があります。

これらのアイテムの属性を、少なくとも2つのレベルのネストされたドロップダウンリストに設定したいと思います<ul>。

私の質問は、具体的には、のさまざまなレベルを参照する方法<ul>について<li>です<a>。

ナビゲーションバーに名前を付けましたid="navBar"。

私はYouTubeで見ました：ドロップダウンナビゲーションバーの構築

使用される構文は次のとおりです。

ul#navBar .sub1 li
ul#navBar .sub1 li a

クラス「.sub1」が定義されており、ネストされたの第1レベルであり、 <ul>「。sub2」がネストされたの第2レベルである場合<ul>。

これらのレベルを参照すると、使用されるコードはです。

ul#navBar .sub2 a {
                  background-color: blue;}

ul#navBar li:hover > a {
            background-color: #CFC;
            }

わざわざ.sub1と.sub2を定義するのは不必要であるように思われ、私は次の形式を使用しています。

#navBar ul li{ background-color: blue;}

#navBar ul li:hover ul{ background-color: red;}

本当の質問：

私の（すぐ上のコード）スタイルのフォーマットを使用した正しい構文は何ですか。ネストされた第2レベルを参照し、そこに<ul>影響を与えるには？<li><a>

私はそれが次の線に沿っていると仮定しました：

 #navBar ul li ul li: hover ul{ background-color: red;}

しかし、私は間違っています:(

4

2 に答える 2

0 
#navnar ul 
{/*some style*/} Folder
#navbar ul ul
{/*some style*/} sub-folder

#navbar ul li:hover
{/*some style*/}
#navbar ul ul li:hover
{/*some style*/}

これがあなたが求めているものだと思います。

詳細については、このチュートリアルを確認してください-css3-animated-dropdown-menu

于 2013-03-26T17:26:12.050 に答える
0

最初に、の前にスペースがあってはならないことに注意してください:hover。

したがって、概要を説明している基本的なHTML構造は次のとおりです。

<ul id="navbar">
    <li>
        <ul class="sub1">
            <li>
                <ul class="sub2">
                    <li><a>Text</a><li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

liおよびa内を参照するには、次の.sub2ように記述します。

#navbar ul ul li { style to apply to li }
#navbar ul ul li a { style to apply to a }
#navbar ul ul li:hover { style to apply to li on hover }
#navbar ul ul li:hover a { style to apply to a on li hover }

チュートリアルでクラスが割り当てられた理由は、一般的なネストされた要素を使用することは、CSSセレクターを使用する非常に非効率的な方法であるためです。クラスを使用する方が高速です。詳細については、CSS-Tricksのこの記事を参照してください。

于 2013-03-28T05:30:38.217 に答える