CSSだけで作る最も単純なプルダウンメニュー（ドロップダウンメニュー）【Webデザイン】

今まではIE6の存在等もあってCSSだけでプルダウンメニューを作るのはほぼ不可能でしたが、CSSがより多くのブラウザでしっかりと反映されるようになってきたので、CSSだけでプルダウンメニューを書くことができるようになりました。
今回は、その手順を解説していこうと思います。

1. 最初にHTMLを用意します。入れ子のリストを作ってそれぞれにリンクを設定します。

   <ul id="dropmenu">
     <li><a href="#">親メニュー</a>
       <ul>
         <li><a href="#">子メニュー</a></li>
         <li><a href="#">子メニュー</a></li>
         <li><a href="#">子メニュー</a></li>
       </ul>
     </li>
     <li><a href="#">親メニュー</a>
       <ul>
         <li><a href="#">子メニュー</a></li>
         <li><a href="#">子メニュー</a></li>
         <li><a href="#">子メニュー</a></li>
       </ul>
     </li>
     <li><a href="#">親メニュー</a> </li>
     <li><a href="#">親メニュー</a> </li>
     <li><a href="#">親メニュー</a> </li>
   </ul>
   

2. 次に書いたリストにCSSを適応させてボタンにします。
   プルダウンメニューの部分も表示されたときの状態でデザインしておきます。
   以下の手順でやると比較的やりやすいです。
1. まずはトップレベルにある<UL>（id=”dropmenu”）に対してリストをボタンにする準備のCSSを書きます。

   #dropmenu {
   	margin: 0px;
   	padding: 0px;
   	list-style-type: none;
   	width: 800px; /* 十分な横幅があればこれはいらない */
   	float: left; /* floatで高さが無くなる対策 */
   }
   

2. 親メニューをfloatを使って横並びにします。（親メニューだけにfloatさせたいので「>」を使っています）
   自分の場合は<li>に対しては最低限（ここではfloat）の記述しかせずに、<a>に対してデザインの指定を入れるようにしています。

   #dropmenu > li {
   	float: left;
   position: relative; /* 子メニューにabsoluteを設定するため */
   }
   #dropmenu li a {
   	display: block; /* aタグはインライン要素なのでブロックレベル要素にする */
   	text-align: center;
   	height: 20px;
   	width: 150px;
   	padding-top: 10px;
   	background-color: #CCC;
   	font-size: 14px;
   	color: #000;
   	text-decoration: none;
   	border: 1px solid #000;
   }
   

3. 子メニューは<ul>に対してposition:absoluteを使って位置をレイアウトします。
   （ついでにリストをボタンにする準備のCSSも書いておきます）

   #dropmenu li ul {
   	margin: 0px;
   	padding: 0px;
   	list-style-type: none;
   	position: absolute;
   	top:32px;
   	left:0px;
   }

4. 先に子メニューにposition:absoluteを付けてから親メニューをfloatした方が見た目にレイアウトが整えやすくていいと思います。
3. 子メニューのulに対してdisplay:noneを設定します。画面から消えてしまうのでこの前にa:hover等のデザインも指定しておいた方がいいです。

   #dropmenu li ul {
   	margin: 0px;
   	padding: 0px;
   	list-style-type: none;
   	position: absolute;
   	top:32px;
   	left:0px;
   	display:none;
   }

4. 一番のポイントはここ。親メニューの<li>に対してli:hoverの擬似要素の指定をすることで、<li>にポインタが重なった時に子メニューの<ul>が表示されるようにします。

   #dropmenu li:hover ul {
   	display: block;
   }

ということで、CSSを全部まとめて書くと以下のとおりになります。

#dropmenu {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	width: 800px; /* 十分な横幅があればこれはいらない */
	float: left; /* floatで高さが無くなる対策 */
}
#dropmenu > li {
	float: left;
position: relative; /* 子メニューにabsoluteを設定するため */
}
#dropmenu li a {
	display: block; /* aタグはインライン要素なのでブロックレベル要素にする */
	text-align: center;
	height: 20px;
	width: 150px;
	padding-top: 10px;
	background-color: #CCC;
	font-size: 14px;
	color: #000;
	text-decoration: none;
	border: 1px solid #000;
}
#dropmenu li ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: absolute;
	top:32px;
	left:0px;
}
#dropmenu li ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: absolute;
	top:32px;
	left:0px;
	display:none;
}
#dropmenu li:hover ul {
	display: block;
}

なお、ここに動きを付けたい場合はoverflowプロパティとtransitionプロパティ（CSS3）を使って以下のようにします。
（赤字部分追記、一部削除しています）

#dropmenu {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	width: 800px; /* 十分な横幅があればこれはいらない */
	float: left; /* floatで高さが無くなる対策 */
}
#dropmenu > li {
	float: left;
position: relative; /* 子メニューにabsoluteを設定するため */
}
#dropmenu li a {
	display: block; /* aタグはインライン要素なのでブロックレベル要素にする */
	text-align: center;
	height: 20px;
	width: 150px;
	padding-top: 10px;
	background-color: #CCC;
	font-size: 14px;
	color: #000;
	text-decoration: none;
	border: 1px solid #000;
}
#dropmenu li ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: absolute;
	top:32px;
	left:0px;
	overflow: hidden;
	height: 0px;
	transition: all 0.5s;
}
#dropmenu li:hover ul {
	height: 100px;
}

つまり、displayで表示、非表示を切り替えていたのを、子メニュー<ul>の高さを0にしてはみ出した部分を非表示（overflow:hidden）にすることでまずは子メニューを消し、高さを戻してあげて表示させるというかたちにしてから、CSS3で追加になったtransition（トランジッション）の指定をしてあげるということになります。

via : CSSだけで作る動きのあるドロップダウンメニュー｜Webpark