CSSのみで、かわいいドロップダウンメニュー作ってみました。
JavaScript使わず、息抜きにやろうとしましたが、苦戦しました。
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"/><title>CSSのみで、かわいいドロップダウンメニュー作ってみた。</title><linkrel="stylesheet"href="style.css"type="text/css"/></head><body><divid="wrapper"><divid="nav"><ul><liclass="color-blue"><ahref="#">ドリンク</a><ulclass="subs"><li><ahref="test.html">コーヒー</a></li><li><ahref="test.html">ココア</a></li><li><ahref="test.html">紅茶</a></li></ul></li><liclass="color-red"><ahref="#">スイーツ</a><ulclass="subs"><li><ahref="test.html">チーズケーキ</a></li><li><ahref="test.html">ロールケーキ</a></li><li><ahref="test.html">スフレ</a></li></ul></li><liclass="color-yellow"><ahref="#">和菓子</a><ulclass="subs"><li><ahref="test.html">もち菓子</a></li><li><ahref="test.html">団子</a></li><li><ahref="test.html">八ツ橋</a></li></ul></li><liclass="color-green"><ahref="#">スナック</a><ulclass="subs"><li><ahref="test.html">キャラメル</a></li><li><ahref="test.html">ウェハース</a></li><li><ahref="test.html">クラッカー</a></li></ul></li></ul></div></div></body></html>style.css
@charset"utf-8";/* --- base --- */body{background-color:#ECECEC;font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;font-size:12px;color:#465866;}body,div,ul,li{margin:0;padding:0;}img{border:0;}a{text-decoration:none;color:#465866;}/* --- wrapper --- */#wrapper{width:728px;margin:50pxauto;}/* --- nav --- */#nav{width:728px;background-color:#FFFFFF;}#navli{list-style:none;}#nav>ul>li{position:relative;float:left;width:180px;margin:01px;}#nav>ul>li>a{display:block;height:55px;background-color:#FFFFFF;font-family:Helvetica,Verdana,Arial,sans-serif;font-size:18px;line-height:55px;text-align:center;}/* --- 子メニュー --- */ul.subs{position:absolute;top:100%;width:180px;background-color:#FFFFFF;transition:all0.5sease;opacity:0;visibility:hidden;}ulli:hover>ul{opacity:1;visibility:visible;}ul.subslia{display:block;height:40px;font-size:12px;line-height:40px;text-indent:22px;transition-duration:0.2s;}/* --- 色の指定 --- */li.color-blue{border-top:5pxsolid#ffb6b9;}li.color-red{border-top:5pxsolid#fae3d9;}li.color-yellow{border-top:5pxsolid#bbded6;}li.color-green{border-top:5pxsolid#8ac6d1;}/* --- 子メニュー --- */li.color-blueul.subslia:hover{background-color:#ffb6b9;color:#FFF;}li.color-redul.subslia:hover{background-color:#fae3d9;color:#FFF;}li.color-yellowul.subslia:hover{background-color:#bbded6;color:#FFF;}li.color-greenul.subslia:hover{background-color:#8ac6d1;color:#FFF;}