
CSSだけでドロップダウンメニュー
2015年2月3日CSSテクニック
CSSだけでドロップダウンメニューをつくります。
jQueryを利用してドロップダウンメニューをつくる場合は、jQueryでつくる親ボタンが画像の場合のドロップダウンメニューをご覧ください。
HTML
<div id="globalNav"> <ul> <li> <a href="#">menu01</a> <ul> <li><a href="#">child menu01</a></li> <li><a href="#">child menu02</a></li> </ul> </li> <li> <a href="#">menu02</a> <ul> <li><a href="#">child menu01</a></li> <li><a href="#">child menu02</a></li> <li><a href="#">child menu03</a></li> </ul> </li> <li> <a href="#">menu03</a> <ul> <li><a href="#">child menu01</a></li> <li><a href="#">child menu02</a></li> </ul> </li> <li> <a href="#">menu04</a> <ul> <li><a href="#">child menu01</a></li> <li><a href="#">child menu02</a></li> <li><a href="#">child menu03</a></li> </ul> </li> <li> <a href="#">menu05</a> <ul> <li><a href="#">child menu01</a></li> <li><a href="#">child menu02</a></li> <li><a href="#">child menu03</a></li> <li><a href="#">child menu04</a></li> </ul> </li> </ul> </div>
CSS
#globalNav { max-width: 1024px; min-width: 640px; width: 100%; margin: 0 auto; padding: 0 30px; box-sizing: border-box; } #globalNav * { transition: .15s linear; -webkit-transition: .15s linear; -moz-transition: .15s linear; -o-transition: .15s linear; -ms-transition: .15s linear; } #globalNav ul li { position: relative; width: 20%; float: left; } #globalNav ul li a { display: block; background-color: #52d3ff; color: #ffffff; text-align: center; text-decoration: none; padding: 15px 0; } #globalNav ul li:hover a { background-color: #2fcaff; } #globalNav ul li ul { position: absolute; top: 100%; width: 100%; visibility: hidden; opacity: 0; -ms-filter: "alpha( opacity=0 )"; filter: alpha( opacity=0 ); } #globalNav ul li:hover ul { visibility: visible; opacity: 100; -ms-filter: "alpha( opacity=100 )"; filter: alpha( opacity=100 ); } #globalNav ul li ul li { float: none; width: 100%; } #globalNav ul li ul li a { display: block; margin-top: 1px; } #globalNav ul li:hover ul li a { background-color: #52d3ff; } #globalNav ul li:hover ul li a:hover { background-color: #2fcaff; }