ドロップダウンメニューを実現するための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 アクティビティ
推薦する
jsはカスタムドロップダウンボックスを実装します
この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...
メタを使用してトラフィックキャッシュをキャンセルし、ページにアクセスするたびにページを更新して簡単にデバッグできるようにします。
コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...
MySql ログイン パスワードを忘れた場合とパスワードを忘れた場合の解決策
方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...
Nginx Webサーバーのサンプルコードの設定方法の詳細な説明
概要今日は主に、NGINX を Web サーバーとして設定する方法を共有します。内容は次のとおりです...
nginx がアップストリーム アドレスにジャンプしない問題の解決方法
序文今日、nginx で非常に奇妙な問題に遭遇しました。フロントエンドの tomcat がページにジ...
Vueはechartを使用してラベルと色をカスタマイズします
この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...
WeChatアプレットは左にスワイプしてリスト項目を削除する効果を実現
この記事では、WeChatミニプログラムの具体的なコードを共有し、左にスワイプしてリスト項目を削除す...
Mysql general_log をクリーンアップする方法の概要
方法1: グローバル general_log を 'OFF' に設定します。 テーブ...
Linux で開いているポートへのリモート アクセスを許可する方法
1. ファイアウォール設定ファイルを変更する # vi /etc/sysconfig/iptable...
ウェブページの右下隅に「いいね！」カード効果を実現するための CSS (サンプルコード)
効果 HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。 &l...
イメージのアップロードとダウンロードに docker をプロキシするためのプライベート ライブラリとして nexus を使用する
1. Nexusの設定1. Dockerプロキシを作成する外部ネットワーク ウェアハウスからローカル...
MySQL学習記録: KEYパーティションが引き起こした血なまぐさい事件
需要背景ビジネス テーブル tb_image のデータの一部は次のとおりです。id は一意ですが、i...
なぜ Tomcat が起動できないのでしょうか?
目次現象：ポートの使用:ファイルにスペルミスがあります:現象： Tomcat がインストールされ、W...
いくつかの面接の質問を使ってJavaScriptの実行メカニズムを調べる
目次前の単語同期と非同期前菜プレートを追加マクロタスク マイクロタスク約束しましょうタイマーを追加す...
IDEA が Docker を統合してリモート展開を実現するための手順
1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...