CSSのみで、かわいいドロップダウンメニュー作ってみました。
JavaScript使わず、息抜きにやろうとしましたが、苦戦しました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>CSSのみで、かわいいドロップダウンメニュー作ってみた。</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li class="color-blue">
<a href="#">ドリンク</a>
<ul class="subs">
<li><a href="test.html">コーヒー</a></li>
<li><a href="test.html">ココア</a></li>
<li><a href="test.html">紅茶</a></li>
</ul>
</li>
<li class="color-red">
<a href="#">スイーツ</a>
<ul class="subs">
<li><a href="test.html">チーズケーキ</a></li>
<li><a href="test.html">ロールケーキ</a></li>
<li><a href="test.html">スフレ</a></li>
</ul>
</li>
<li class="color-yellow">
<a href="#">和菓子</a>
<ul class="subs">
<li><a href="test.html">もち菓子</a></li>
<li><a href="test.html">団子</a></li>
<li><a href="test.html">八ツ橋</a></li>
</ul>
</li>
<li class="color-green">
<a href="#">スナック</a>
<ul class="subs">
<li><a href="test.html">キャラメル</a></li>
<li><a href="test.html">ウェハース</a></li>
<li><a href="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: 50px auto;
}
/* --- nav --- */
# nav {
width: 728px;
background-color: #FFFFFF;
}
# nav li {
list-style: none;
}
# nav > ul > li {
position: relative;
float: left;
width: 180px;
margin: 0 1px;
}
# 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: all 0.5s ease;
opacity: 0;
visibility: hidden;
}
ul li:hover > ul {
opacity: 1;
visibility: visible;
}
ul.subs li a {
display: block;
height:40px;
font-size: 12px;
line-height: 40px;
text-indent: 22px;
transition-duration: 0.2s;
}
/* --- 色の指定 --- */
li.color-blue {
border-top: 5px solid #ffb6b9;
}
li.color-red {
border-top: 5px solid #fae3d9;
}
li.color-yellow {
border-top: 5px solid #bbded6;
}
li.color-green {
border-top: 5px solid #8ac6d1;
}
/* --- 子メニュー --- */
li.color-blue ul.subs li a:hover {
background-color: #ffb6b9;
color:#FFF;
}
li.color-red ul.subs li a:hover {
background-color: #fae3d9;
color:#FFF;
}
li.color-yellow ul.subs li a:hover {
background-color: #bbded6;
color:#FFF;
}
li.color-green ul.subs li a:hover {
background-color: #8ac6d1;
color:#FFF;
}