ドロップダウンメニューを実現するための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を使用してプライベートGitLabを構築する2つの方法
最初の方法: docker インストール1. オープンソース版のイメージを取得する2. 対応するデー...
Linux環境でIPV6接続をサポートするようにmysql5.6を設定する方法
導入：この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...
Docker Consul の概要とクラスター環境構築手順（グラフィカルな説明）
目次1. Dockerコンサルの概要2. nginxとconsulをベースにした自動検出と高可用性の...
Linux での vi (vim) の新しい使い方のまとめ
私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...
VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル
ここ数年、私は自動化とコンピューターを行ったり来たりしてきました。最近は、機械学習に関連するプロジェ...
MySQL クエリ フィールド タイプが json の場合の 2 つのクエリ メソッド
テーブル構造は次のとおりです。 id varchar(32) 情報JSONデータ： id = 1 i...
JDBC が MySQL に接続して中国語を処理するときに文字化けする問題の解決方法の詳細説明
JDBC が MySQL に接続して中国語を処理するときに文字化けする問題の解決方法の詳細説明最近、...
Windows 10 無料インストール版の MySQL インストールと設定のチュートリアル
ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージョンと一致し...
MySQL ロックブロッキングの詳細な分析
日常のメンテナンスでは、スレッドがブロックされることが多く、データベースの応答が非常に遅くなります。...
Linux コマンドで .sql ファイルをエクスポートおよびインポートする方法
この記事では、Linux コマンドを使用して .sql ファイルをエクスポートおよびインポートする方...
JavaScript を使用したコマンドライン アプリケーションの構築
目次1. ノードをインストールする2. Commander.jsをインストールする3. JavaSc...
Docker-compose を使用して ELK クラスターを構築する方法
すべてのオーケストレーション ファイルと構成ファイルは、私の Github からアクセスできます。構...
Jenkins を使用した Vue プロジェクトのワンクリック パッケージングと公開の実装
目次Jenkinsのインストールインストールポート番号を変更します（デフォルトのポートは8080です...
int(3)とint(10)の値の範囲はmysqlで同じですか？
目次質問：答え：現実：知識ポイント結論は：要約する質問： MySQLフィールド、unsigned i...