デザイン自由自在のdivドロップダウンメニューをCSSのみで実現コピペで使えるHTML+CSS

リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。Chrome、Edge、Opera、Firefoxで確認済。実際に実装する際はスマートフォン向けに@mediaを使って低解像度向けにwidthを狭く指定するか、又は%を指定する方法を検討してください。

JavaScriptを用いないためAMPサイトでも利用できます。

INDEX

ドロップダウンメニューサンプル
解説とコード
1. HTML
2. スタイルシート
まとめ
関連するCSS

ドロップダウンメニューサンプル

解説とコード

boxに当たるdiv内のアイテムについては、画像やyoutube埋め込みなど、何を入れても構わない。

HTML

<nav id="div-menu-nav">
  <div class="menu-tab menu-hover1"><a>プルダウン1</a></div><div class="menu-tab menu-hover2"><a>プルダウン2</a></div>
  <div class="box1">
    <div><a>アイテム1-1</a></div>
    <div><a>アイテム1-2</a></div>
    <div><a>アイテム1-3</a></div>
    <div><a>アイテム1-4</a></div>
    <div><a>アイテム1-5</a></div>
  </div>
  <div class="box2">
    <div><a>アイテム2-1</a></div>
    <div><a>アイテム2-2</a></div>
    <div><a>アイテム2-3</a></div>
  </div>
</nav>

スタイルシート

#div-menu-nav{
  position: relative; /* 子要素においてabsoluteを用いるため指定する */
  font-size:14px;
  z-index:9999; /* 最上位に表示する 一部の見出しがプルダウンの上に表示されてしまうことの対策 */
}
#div-menu-nav .menu-tab{
  display: inline-block; /* メニュータブを横並びにする */
  width:140px;
}
#div-menu-nav a{
  display: block; 
  padding: 10px 0px; 
  width: 100%; 
  color: #343434; 
  text-decoration: none;
  background-color: #fafafa;
  border-bottom: solid 1px #67b44a; 
}
#div-menu-nav a:hover{
  background-color:#ffe6e6;
  border-bottom: solid 1px #dd5656; 
}
#div-menu-nav a::before{　/* タブの左側のアクセントの変化の指定 ↓ */
  display: inline-block;
  content: "■"; 
  color: #67b44a; 
  transform: scaleX(0.4); /* 長方形を表示するにはborder 4pxなどの方法もありますが■をX方向に縮小する方法が楽です */
}
#div-menu-nav a:hover::before{
  content: "＞"; 
  color: #dd5656; 
}
#div-menu-nav .menu-tab a::before{
  display: inline-block;
  content: "＞"; 
  font-weight:900;
  color: #67b44a; 
  transform: scale(0.7,0.5) rotate(90deg); /* transformはまとめて書かないとうまく表示されないことがある */
}                  /* ＞を90度傾けて下に向けます */
#div-menu-nav .menu-tab a:hover::before{
  color: #dd5656; 
}                          /* アクセント指定ここまで */
#div-menu-nav .box1{
  position: absolute; 
  background-color: #ffffff;
  display: none;
  left:10px; /* 左から10pxで表示 */
}
#div-menu-nav .box2{
  position: absolute;
  left:150px; /*左から 10+140=150pxで表示 */
  display: none; 
}
#div-menu-nav .menu-hover1:hover ~ .box1{ /* メニューをhoverすれば box1を表示 */
  display: block;
}
#div-menu-nav .box1:hover{  /* 表示されたbox1をhoverすればそのままbox1を表示し続ける */
  display: block;           /* これがなければbox1が消えてしまう */
}
#div-menu-nav .box1 div{ /*各アイテムについて */
  background-color: #ffffff;
  width:130px;
}
#div-menu-nav .menu-hover2:hover ~ .box2{ /* box2についても同様 */
  display: block;
}
#div-menu-nav .box2:hover{
  display: block;
}
#div-menu-nav .box2 div{
  background-color: #ffffff;
  width:130px;
}

まとめ

divドロップダウンメニュー
- メニューをhoverした際、対応するboxが表示されるよう、:hover ~ .boxを使ってdisplay:block;とする。
- 続けてdivにhoverした際、対応するboxが消えないよう、boxについてdisplay:block;とする
- 端末によってwidthを変更する場合は、@mediaを用いる(省略)