CSSだけでプルダウンメニュー

マウスを重ねると下にニュルっと出てくるプルダウンメニュー。

一般的にJavaScriptで設定しますがCSSだけでやってみます。

個人的にこれは必要かと思ったのでメモ。

まず

次にCSSを設定

・大きな項目の<li>を設定

#gNav li {
float: left;
width: 200px;
position: relative;　/*親という意味*/
}

・詳細の<ul>を設定

#gNav li ul {
text-align: center;
display: none;　　/*何もないときは非表示*/
}

・オンマウスの時の<li>の設定

#gNav li:hover ul {
display: block;
position: absolute;
z-index: 100;
top: 40px;
}

これでオンマウスでプルダウンメニューが出てきた

ここからはレイアウトの設定

・リンクの文字色や背景など（）

#gNav ul a {
color: #FFF;
text-decoration: none;
background: #9BA198;
display: block;
height: 20px;
width: 200px;
border-top: 1px solid #FFF;
}

・詳細メニューにマウスが重なった時のリンク

#gNav ul a:hover {
background: #7A8079;
}

こんな感じで、まぁシンプルですができました。

<li>要素にも hover とか出来たんだなぁと驚きました。

でもやっぱりJavaScriptでもっとニュルっとしたのがいいですよね＾３＾；

早くJavaScript覚えなきゃです！

意識高い系のニートがメモ代わりにするブログ