ドロップダウンメニューを実現するための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 アクティビティ
推薦する
Docker で Confluence をデプロイする
1. 環境要件1. Docker 17以上がインストールされている2. コンテナ操作docker r...
impress.js プレゼンテーション層フレームワーク (デモツール) - 初めての体験
半年もブログを書いていなかったので、少し恥ずかしいです... 正月休みは、Dota をプレイしたり ...
Innodb で MySQL の 2T テーブルをすばやく削除する方法の例
序文この記事は主に、MySQL の Innodb で 2T の大きなテーブルをすばやく削除する方法に...
MySQLのダウンロードとインストールのプロセスの詳細な説明
1: MySqlをダウンロードする公式サイトのダウンロードアドレス: https://dev.mys...
WeChat アプレットカスタムタブバーステップ記録
目次1. はじめに2. タブバーのスタイルをカスタマイズする3. カスタムタブバーと関連設定を導入す...
CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする
CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...
MySQL クエリ ステートメントのプロセスと EXPLAIN ステートメントの基本概念とその最適化
ウェブサイトやサービスのパフォーマンスは、データベースの設計（適切な言語開発フレームワークを選択した...
CentOS8 yum/dnfで国内ソースを設定する方法
CentOS 8 ではソフトウェア パッケージのインストール プログラムが変更され、yum 構成方法...
HTML のインラインブロックの空白を素早く削除する 5 つの方法
inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...
MySQL8のパスワードを忘れた場合の簡単な解決策
序文MySQL データベースのパスワードを忘れると、データベースに正常にアクセスできなくなり、パスワ...
MySQL シリーズ 14 MySQL 高可用性実装
1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...
プライベートレジストリ内の画像を照会または取得する方法
Dockerはプライベートレジストリ内のイメージを照会または取得するために、 docker 検索 1...
Dockerは1行のコマンドでFTPサービス構築の実装を完了します
1行のコマンド docker run -d \ -v /share:/home/vsftpd \ -...
MySQL サーバー 5.7.20 のインストールと設定方法のグラフィック チュートリアル
この記事ではMySQL 5.7.20のインストールと設定方法を記録し、皆さんと共有します1. MyS...
MySQL シリーズ 4 SQL 構文
目次チュートリアルシリーズ1. SQL言語の紹介と仕様2. データベース操作1. ライブラリを作成す...