ドロップダウンメニューを実現するためのHTML+CSS
|
1. ドロップダウンリストの例 コードは次のとおりです。
<!doctypehtml>
<html>
<ヘッド>
<メタ文字セット="utf-8"/>
<スタイル>
*{
マージン:0;
パディング:0;
テキスト装飾:なし;
リストスタイル:なし;
}
体{
テキスト配置:中央;
}
。ヘッダ{
表示:インラインブロック;
位置:相対;
背景色:#4CAF50;
}
.header:hover .downbtn{
表示:ブロック;
背景色: #f1f1f1;
}
.header:hover{
背景色: #3e8e41;
}
.ヘッダースパン{
パディング:15px;
行の高さ:61px;
カーソル:ポインタ;
色: 白;
}
.header .downbtn{
表示:なし;
位置:絶対;
背景色:#f9f9f9;
ボックスの影: 0px 8px 16px 0px rgba(0,0,0,0.2);
最小幅: 160px;
}
.header .downbtn li{
行の高さ:30px;
テキスト配置:左;
パディング左:5px;
}
.header .downbtn a:hover{
テキスト装飾:下線;
色:#f00;
}
.header .downbtn a{
表示:ブロック;
色：黒;
幅:100%;
}
</スタイル>
</head>
<本文>
<div class="header">
<span>ドロップダウン リスト</span>
<div class="downbtn">
<ul>
<li><a href="#">ドロップダウンリスト 01</a></li>
<li><a href="#">ドロップダウンリスト 02</a></li>
<li><a href="#">ドロップダウンリスト 03</a></li>
<li><a href="#">ドロップダウンリスト 04</a></li>
<li><a href="#">ドロップダウンリスト 05</a></li>
</ul>
</div>
</div>
</本文>
</html>
効果図は以下のとおりです。
2. 技術的なポイント
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: MySQL Workbench の使い方チュートリアルの詳しい説明
>>: W3C チュートリアル (12): W3C SOAP アクティビティ
推薦する
tinyMCEの使い方と体験の詳細な説明
tinyMCE の使用方法の詳細な説明初期化TinyMCE を初期化するときは、ページの HEAD ...
Linux ファイアウォールの状態確認方法の例
Linuxファイアウォールの状態を確認する方法1. 基本操作 # ファイアウォールのステータスを表示...
Javascript の基礎: 演算子とフロー制御の詳細な説明
目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...
nginx をシャットダウン/再起動/起動する方法
閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...
Dockerコマンドは一般ユーザーが実行できるように実装されている
dockerをインストールすると、通常はdockerユーザーグループが作成されます。ステップ2: 現...
Docker コンテナでネットワーク リクエストが遅くなる問題の解決策
Docker の使用中に、いくつかの問題が発見されました。npm install や bundle ...
スパンの最小高さを定義するソリューションは効果がありません
span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...
ウェブページにプレーヤーを埋め込む埋め込み要素の自動開始が false 無効
最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...
大きな太陽の天気アイコンを純粋な CSS で記述する方法の例
効果効果図は以下のとおりです実装のアイデアDivは太陽の長方形の光と影を実現します前の疑似要素は、既...
よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。
3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...
この記事はVueのライフサイクルを理解するのに役立ちます
目次1. beforeCreate & created 2. マウント前とマウント済み3. ...
Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)
1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...
vue3 を使用してカウント関数コンポーネントのカプセル化例を実装する
目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. アイデア2. 準備2. ...
Grafana+Prometheus を使用して MySQL サービスのパフォーマンスを監視する
Prometheus (プロメテウスとも呼ばれる) 公式サイト: https://prometheu...
MySQL 5.0.96 for Windows x86 32 ビット グリーン簡易版インストール チュートリアル
MySQL 5.0 は、いくつかの「高度な機能」があるため定番となっています。これは、Windows...