ドロップダウンメニューを作る

まず普通のHTMLメニューを作り、メニューの階層を決まます。


HTML記述

<nav role="navigation">
<ul>
<li class="menu-item-has-children">
<a href="#">メイン ▼</a>
<ul class="sub-menu">
<li><a href="#">CSS</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SVG</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">デザイン ▼</a>
<ul class="sub-menu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Fonts</a></li>
<li><a href="#">Colour</a></li>
</ul>
</li>
<li><a href="#">その他</a></li>
<li><a href="#">連絡先</a></li>
</ul>
</nav>

CSS記述

/* 親メニュー nav */
nav > ul > li {
position: relative;
float: left;
margin-right: 45px;
}
nav a {
color: #0bd;
text-decoration: none;
}
nav ul a:hover {
color: #0090aa;
}

/* 子メニュー - .sub-menu */
nav .sub-menu {
position: absolute;
width: 180px;
background: #0bd;
top: 30px;
display: none;
}
nav .sub-menu a {
color: #fff;
padding: 10px 15px;
display: block;
}
nav .sub-menu a:hover {
color: #fff;
}



USBメモリウイルスの感染にご注意を! USBメモリウイルスの感染にご注意を!


ドロップダウンメニューの作成ポイント

マウスがメニューに乗っていない時は、子メニューの部分はposition: absolute; で表示位置を指定した後、display: none; で隠しておきます。

子メニューが隠れた状態で、マウスがメニューに乗ると子メニューが display: block; で表示され、ドロップダウンメニューが現れて表示されます。
T R A C K B A C K
この記事のトラックバックURL
http://keni.orvinet.com/tb.cgi/4

C O M M E N T
中国の下請け工場での過酷な労働環境が騒がれているユニクロ。労働問題では何かと批判されることも多いファーストリテイリングですが、筆者が1月15日配信の「なぜユニクロは批判されても売れ続けるのか」で解説したように、きっとこの週末以降もユニクロの客足が極端に落ち込むことはないだろうと見ています
123    [2015/1/25(日) 08:13] [削除]
ACミランのインザーギ監督が、FW本田の早期復帰を喜んだ。23日に行ったラツィオ戦(24日)へ向けた会見で「本田は休みたくない選手だからプレーする」と再合流後に休みを与えず、すぐ戦列に復帰させる意向を示した。4強入りなら決勝か3位決定戦も確定し、今月末までチームを離れるところだったが、これで28日のイタリア杯(対ラツィオ)での起用も見えてきた。ミランは本田離脱後のリーグ戦3戦で1分け2敗。「敗退は本田とすれば残念なことだったろう。
ACミラン    [2015/1/25(日) 08:13] [削除]


名前 :
パスワード :(削除用 : コメント投稿後の修正は不可)
    最大文字数(半角換算)  2000


  プレビュー