0

ホバー時にのみ表示される単一のドロップダウン メニューが必要です。ドロップダウン メニュー リストから、子アイテムの 1 つにカーソルを合わせると、さらにリストが必要になります。

キーワード/親はサブジェクトです。カーソルを合わせると ( Subjects という単語の上に)、次のように表示する必要があります。
数学
英語
スペイン語
歴史
科学
追加 の
マーク

子 Extra にカーソルを合わせると、さらに 3 つの項目が表示されます:
Arts
Sports
Community

ドロップダウン メニューとドロップアップ メニューの両方を試しましたが、親のサブジェクトにカーソルを合わせても子メニュー項目 (アート、スポーツ、コミュニティなど) が表示されます。それらは、Extra にカーソルを合わせたときにのみ表示される必要があります。

私は CSS に挑戦し、オンラインでダウンロードしたドロップダウン スクリプトから最善を尽くしました。しかし、誰もこの状況に対処していないようです。

メニューの HTML は次のとおりです。私がそれを正しく行っているかどうかはわかりません。

<nav id="subjectsNav">
    <ul>
        <li class="last"><a href="#" title="SUBJECTS">SUBJECTS</a>

            <ul>
                <li><a href="#" title="Maths">Maths</a>
                </li>
                <li><a href="#" title="English">English</a>
                </li>
                <li><a href="#" title="Spanish">Spanidsh</a>
                </li>
                <li><a href="#" title="History">History</a>
                </li>
                <li><a href="#" title="Science">Science</a>
                </li>
                <li><a href="#" title="EXTRA">EXTRA</a>
                </li>
                <ul id="extraNav">
                    <li><a href="#" title="Arts">Arts</a>
                    </li>
                    <li><a href="#" title="Sports">Sports</a>
                    </li>
                    <li><a href="#" title="Community">Community</a>
                    </li>
                </ul>
                <li><a href="#" title="Marks">Marks</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

上記の HTML と CSS に関するヘルプが必要です。あなたの答えは大歓迎です。お時間を割いていただき、誠にありがとうございました。

4

1 に答える 1

2

extraNav サブメニューは親リスト項目の中になければなりません:

<ul id="subjectsNav">
<li><a href="#" title="SUBJECTS">SUBJECTS</a>

    <ul>
        <li><a href="#" title="Maths">Maths</a>
        </li>
        <li><a href="#" title="English">English</a>
        </li>
        <li><a href="#" title="Spanish">Spanidsh</a>
        </li>
        <li><a href="#" title="History">History</a>
        </li>
        <li><a href="#" title="Science">Science</a>
        </li>
        <li><a href="#" title="EXTRA">EXTRA</a>
            <ul>
                <li><a href="#" title="Arts">Arts</a>
                </li>
                <li><a href="#" title="Sports">Sports</a>
                </li>
                <li><a href="#" title="Community">Community</a>
                </li>
            </ul>
        </li>
        <li><a href="#" title="Marks">Marks</a>
        </li>
    </ul>
</li>
</ul>

CSS:

/* Main */
#subjectsNav {
    list-style: none;
}
#subjectsNav li {
    width: 70px;
    display: block;
    float: left;
    position: relative;
}
#subjectsNav li:hover > ul {
    display: block;
}
/* Sub-menu */
 #subjectsNav ul {
    list-style: none;
    left: 0;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    z-index: 99999;
}
#subjectsNav ul li {
    float: none;
    display: block;
}
#subjectsNav ul ul {
    top: 0;
    left: 70px;
}

デモ: http://jsfiddle.net/Bc2sv/

于 2013-03-10T14:32:45.987 に答える