シンプルなセカンダリメニューを動的に実装する マウスを第 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 のキャッシュ問題と関連する一連の調査
この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...
ネイティブJSを使用して9つの正方形のグリッドを記述し、9つのグリッドの位置をドラッグして変更する効...
目次序文SessionStorage と LocalStorage の紹介SessionStorag...
まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...
[LeetCode] 196.重複したメールを削除するSQL クエリを記述して、Person とい...
過去 2 日間、ワークベンチが Alibaba Cloud Server に接続できない問題を解決す...
MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...
IE8には複数の互換モードがあります。 IE プラットフォームの設計者である Chris Wilso...
MySQL の mysql 5.7.18 zip バージョンは、クリックして次のステップをクリックし...
MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...
1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...
DOCTYPE が次のとおりである場合:コードをコピーコードは次のとおりです。 <!DOCTY...
目次1. 基本的な文法2. 条件式によるフィルタリング3. 論理式によるフィルタリング4. あいまい...
IIS7 では、「URL REWRITE2」疑似静的モジュールがインストールされているかどうかを確...
ワームは、その名前が示すように、自ら複製し、その数は倍増、つまり指数関数的に増加します。 MySQL...