動的なセカンダリメニューを実現するためのCSS

シンプルなセカンダリメニューを動的に実装する

マウスを第 1 レベルのラベル上に置くと、マウスが小さな手の形に変わり、第 2 レベルのメニューが表示されます。ソースコードは次のとおりです。コピーしてそのまま使用できます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        * {マージン: 0; パディング: 0;}
        ul { リストスタイル: なし;}
        div {
            幅: 100%;
            高さ: 50px;
            背景色: #ccc;
        }
        。初め {
            幅: 100ピクセル;
            高さ: 50px;
            フロート: 左;
            右マージン: 70px;
            /* 背景色: ピンク; */
            カーソル: ポインタ;
            テキスト配置: 中央;
            行の高さ: 50px;
            境界線の半径: 15px;
        }
        .2番目のli{
            幅: 80ピクセル;
            高さ: 50px;
            背景色: 青;
            境界線の半径: 50%;
            上マージン: 10px;
        }
        。2番 {
            表示: なし;
        }
        .first:hover .second{
            表示: ブロック;
            カーソル: ポインタ;
        }
        .first:hover {
            背景色: ピンク;
        }
    </スタイル>

<本文>
    <div>
        <ul>
            <li class="first">
                <p>第 1 レベルのタグ</p>
                <ul class="second">
                    <li>第 2 レベルのタグ</li>
                    <li>第 2 レベルのタグ</li>
                </ul>
            </li>

            <li class="first">
                <p>第 1 レベルのタグ</p>
                <ul class="second">
                    <li>第 2 レベルのタグ</li>
                    <li>第 2 レベルのタグ</li>
                </ul>
            </li>
        </ul>
    </div>

</本文>
</html>

要約する

CSS でダイナミックセカンダリメニューを実装する方法に関するこの記事はこれで終わりです。CSS ダイナミックセカンダリメニューに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: UrlRewriter のキャッシュ問題と関連する一連の調査

>>: VUEプロジェクトでXSS攻撃に遭遇した実体験