CSS と HTML で作るドロップダウンメニュー
概要
CSS と HTML のみでドロップダウンメニューを作成する方法の説明と、ソースの解説をします。
ソース
HTML
- <ul id="drop-down-menu">
- <li><a href="#">コンテンツ1</a>
- <ul>
- <li><a href="#">サブコンテンツ1</a></li>
- <li><a href="#">サブコンテンツ2</a></li>
- <li><a href="#">サブコンテンツ3</a></li>
- <li><a href="#">サブコンテンツ4</a></li>
- <li><a href="#">サブコンテンツ5</a></li>
- </ul>
- </li>
- <li><a href="#">コンテンツ2</a>
- <ul>
- <li><a href="#">サブコンテンツ1</a></li>
- <li><a href="#">サブコンテンツ2</a></li>
- <li><a href="#">サブコンテンツ3</a></li>
- <li><a href="#">サブコンテンツ4</a></li>
- <li><a href="#">サブコンテンツ5</a></li>
- </ul>
- </li>
- <li><a href="#">コンテンツ3</a>
- <ul>
- <li><a href="#">サブコンテンツ1</a></li>
- <li><a href="#">サブコンテンツ2</a></li>
- <li><a href="#">サブコンテンツ3</a></li>
- <li><a href="#">サブコンテンツ4</a></li>
- <li><a href="#">サブコンテンツ5</a></li>
- </ul>
- </li>
- <li><a href="#">コンテンツ4</a>
- <ul>
- <li><a href="#">サブコンテンツ1</a></li>
- <li><a href="#">サブコンテンツ2</a></li>
- <li><a href="#">サブコンテンツ3</a></li>
- <li><a href="#">サブコンテンツ4</a></li>
- <li><a href="#">サブコンテンツ5</a></li>
- </ul>
- </li>
- </ul>
CSS
- #drop-down-menu {
- margin: 0px;
- padding: 0px;
- list-style-type: none;
- text-align: center;
- font-size: 20px;
- font-weight: bold;
- width: 800px;
- }
- #drop-down-menu li {float: left; width: 200px;}
- #drop-down-menu li a {
- text-decoration: none;
- color: #FFFFFF;
- background-color: #0000FF;
- display: block;
- padding: 5px;
- }
- #drop-down-menu li:hover a {
- background-color: #000080;
- }
- #drop-down-menu1 li:hover ul {
- display: block;
- }
- #drop-down-menu li ul {
- margin: 0px;
- padding: 0px;
- list-style-type: none;
- display: none;
- }
- #drop-down-menu li:hover ul {display: block;}
- #drop-down-menu li ul a {
- display: block;
- text-decoration: none;
- color: #FFFFFF;
- background-color: #0000FF;
- }
- #drop-down-menu li ul li:hover a {
- background-color: #008080;
- }
- #drop-down-menu:after {
- content: "";
- clear: both;
- display: block;
- }
表示例
ソースの解説
HTMLの解説
特にありません。
CSSの解説
- #drop-down-menu li ul {
- margin: 0px;
- padding: 0px;
- list-style-type: none;
- display: none;
- }
li タグの中にある ul を display: none; で非表示にします。
- #drop-down-menu li:hover ul {display: block;}
メニュー（li タグ）にオンマウスすると、ドロップダウンメニューを display: block; で表示させます。
- #drop-down-menu li a {
- text-decoration: none;
- color: #FFFFFF;
- background-color: #0000FF;
- display: block;
- padding: 5px;
- }
li タグの中の a タグに background-color を指定してメニューの背景を設定します。
- #drop-down-menu li:hover a {
- background-color: #000080;
- }
メニューにオンマウスした際の背景色を background-color で指定します。
その他の項目においても background-color を指定することで背景色の変更ができます。