最小限のCSSコードでプルダウンメニューをつくる

html ファイルと CSS ファイルで、最も少ないコードでプルダウンメニューを作成する。

▶ index.html

  <div id="menu" >
  <ul >
      <li > <a href="#" >Home </a > </li >
     
       <li class="dropdown" > <a href="#" >登山 </a >
           <ul >
                <li > <a href="#" >高尾山 </a > </li >
                <li > <a href="#" >栗駒岳 </a > </li >
                 <li > <a href="#" >富士山 </a > </li >
                 <li > <a href="#" >鳥海山 </a > </li >
            </ul >
       </li >
     
       <li class="dropdown" > <a href="#" >キャンプ </a >
            <ul >
                 <li > <a href="#" >霧ヶ峰高原 </a > </li >
                 <li > <a href="#" >車山高原 </a > </li >
            </ul >
       </li >
     
       <li class="active" > <a href="#" >海外旅行 </a > </li >
     
       <li > <a href="#" >PC </a > </li >
  </ul >
 </div >

▶ menu.css

■ 出力

 #menu ul li {
     list-style-type: none;
     float: left;
     display: block; 
     padding-right: 20px;
}
     
#menu ul li ul {
      position: absolute;
      padding: 0px 0px 0px 0px;
}
     
#menu ul li ul li {
     display: none;
     float: none;
}
     
#menu ul li.dropdown:hover ul li {
     display: block;
     background-color: yellow;
}

サブメニューを認識しやすいように　色付けした
background-color: yellow;

更に見やすくする

以下のコードを追加すると、見やすいメニューとなる。

▶ menu.css （追加分コードのみ）

#menu ul li.dropdown ul li:hover,
#menu ul li:hover {
       background-color: lightgreen;
}

■ 出力

html,css,メニュー,プルダウンメニュー,最小限