CSS ドロップダウンメニュー

CSSを使って、簡単にドロップダウンメニューを作成することができます。

サンプルコード
1. HTML構造
2. CSSスタイル
おまけ

サンプルコード

HTML構造

<ul class="dropdown-menu">
  <li><a href="#">メニュー1</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle">メニュー2</a>
    <ul class="dropdown-content">
      <li><a href="#">サブメニュー1</a></li>
      <li><a href="#">サブメニュー2</a></li>
      <li><a href="#">サブメニュー3</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー3</a></li>
</ul>

CSSスタイル

/* メインメニューバーのスタイル */
.dropdown-menu {
  list-style: none; /* リストのマーカーを削除 */
  padding: 0; /* パディングをゼロに設定 */
  margin: 0; /* マージンをゼロに設定 */
  background-color: #333; /* 背景色を設定 */
  display: flex; /* メニューアイテムを水平に並べる */
}

/* メニューアイテムの相対位置 */
.dropdown-menu li {
  position: relative;
}

/* メニューアイテムのリンクスタイル */
.dropdown-menu li a {
  display: block; /* ブロック要素に設定 */
  padding: 10px; /* パディングを追加 */
  text-decoration: none; /* テキストの下線を削除 */
  color: white; /* テキスト色を白に設定 */
}

/* メニューアイテムのホバー時の背景色 */
.dropdown-menu li a:hover {
  background-color: #444;
}

/* ドロップダウンメニューの基本スタイル */
.dropdown-content {
  display: none; /* 最初は非表示に設定 */
  position: absolute; /* 絶対位置を設定 */
  top: 100%; /* 親要素の下端に配置 */
  left: 0; /* 親要素の左端に配置 */
  background-color: #333; /* 背景色を設定 */
  list-style: none; /* リストのマーカーを削除 */
  padding: 0; /* パディングをゼロに設定 */
  min-width: 160px; /* 最小幅を設定 */
  z-index: 1; /* z-indexを1に設定 */
}

/* ドロップダウンメニュー内のリンクスタイル */
.dropdown-content li a {
  display: block; /* ブロック要素に設定 */
  padding: 10px; /* パディングを追加 */
  text-decoration: none; /* テキストの下線を削除 */
  color: white; /* テキスト色を白に設定 */
}

/* ドロップダウンメニュー内のリンクホバー時の背景色 */
.dropdown-content li a:hover {
  background-color: #444;
}

/* ドロップダウンメニューの表示切り替え */
.dropdown:hover .dropdown-content {
  display: block; /* 親要素にホバー時に表示 */
}

このコードでは、dropdown-menuクラスを持つul要素がメインメニューで、その中にdropdownクラスを持つli要素がドロップダウンメニューを表します。

サブメニューは、dropdown-contentクラスを持つul要素で定義しています。

CSSでドロップダウンメニューの表示/非表示を切り替えるために、:hover擬似クラスを使用しています。

このマニュアルを参考に、独自のドロップダウンメニューを作成してみてください。

おまけ

画像の上にマウスを移動すると、ドロップダウンコンテンツが表示されます。

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.desc {
    padding: 15px;
    text-align: center;
}
</style>
<div class="dropdown">
  <img src="画像.png" width="100">
  <div class="dropdown-content">
    <img src="画像.png" width="400">
    <div class="desc">CODINGHAKU</div>
  </div>
</div>