6

CSS ロールオーバー メニューに問題があります。

よく見てきましたし、チュートリアルもありますが、不要なコードが多すぎて、どれが必要なコードでどれが単なる CSS なのかを区別するのが難しいと感じています。

私が取り組んでいる Web サイトには、意図的にスクリプト (JavaScript) を無効にしているユーザーが多数いるため、CSS にホバー メニューを表示したいと考えています。

CSS では、ユーザーが親リスト項目にカーソルを合わせたときに、親リスト項目の下に「サブメニュー」を表示する方法がわかりません。CSSでこれがどのように機能するかを誰かが理解するのを手伝ってもらえますか?

以下は、私が言及しているものの画像です。

ここに画像の説明を入力

4

1 に答える 1

12

以下は、基本的な形式で機能しますが、独自の好み (位置、境界線、色など) のスタイルです。

<ul>
    <li>Simple List item
        <ul>
            <li>sub menu item 1</li>
            <li>sub menu item 2</li>
            <li>sub menu item 3</li>
       </ul>
    </li>
</ul>

CSS の場合:

ul li {
    position: relative;
}

ul ul {
    position: absolute;
    top: 1em;
    left: 0;
    display: none;
}

ul > li:hover ul {
    display: block;
}

JS フィドルのデモ。

于 2012-08-01T18:06:47.203 に答える