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

動的なセカンダリメニューを実現するための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攻撃に遭遇した実体験

推薦する

MySQLストアドプロシージャの原理と使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...

ネイティブjsは9マスグリッドのドラッグアンドドロップを実現します

ネイティブJSを使用して9つの正方形のグリッドを記述し、9つのグリッドの位置をドラッグして変更する効...

Javascript で SessionStorage と LocalStorage を使用する方法

目次序文SessionStorage と LocalStorage の紹介SessionStorag...

Linux で固定 IP を設定する方法 (テスト済みで効果的)

まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...

LeetCode の SQL 実装 (196. 重複するメールボックスを削除する)

[LeetCode] 196.重複したメールを削除するSQL クエリを記述して、Person とい...

Alibaba Cloud Server Ubuntu 上の Workbench が MySQL に接続できない問題の解決策 (テスト済み)

過去 2 日間、ワークベンチが Alibaba Cloud Server に接続できない問題を解決す...

MySQL の日付関数と日付変換およびフォーマット関数

MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...

IE8はマルチ互換モードを使用してWebページを正常に表示します

IE8には複数の互換モードがあります。 IE プラットフォームの設計者である Chris Wilso...

MySQL 5.7.18 zip バージョンのインストール チュートリアル

MySQL の mysql 5.7.18 zip バージョンは、クリックして次のステップをクリックし...

更新とデータ整合性処理のためのMySQLトランザクション選択の説明

MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...

HTML DOCTYPEの略語

DOCTYPE が次のとおりである場合:コードをコピーコードは次のとおりです。 <!DOCTY...

MySQL データベースの必須条件クエリ ステートメント

目次1. 基本的な文法2. 条件式によるフィルタリング3. 論理式によるフィルタリング4. あいまい...

IIS7 IIS8 http は自動的に HTTPS にジャンプします (ポート 80 はポート 443 にジャンプします)

IIS7 では、「URL REWRITE2」疑似静的モジュールがインストールされているかどうかを確...

MySQLワームレプリケーションの基本知識

ワームは、その名前が示すように、自ら複製し、その数は倍増、つまり指数関数的に増加します。 MySQL...