jquery無しCSSのみの縦型ドロップダウンメニュー
アニメーションがなくても良い場合はcssだけドロップダウンメニュー作れます。
HTML
<ul class="nav"> <li><a href="#">nav1</a> <div class="nav1childnav childnav"> <h3>ナビ1子メニュータイトル</h3> <ul> <li><a href="#">nav1child1</a></li> <li><a href="#">nav1child2</a></li> <li><a href="#">nav1child3</a></li> <li><a href="#">nav1child4</a></li> <li><a href="#">nav1child5</a></li> </ul> </div> </li> <li><a href="#">nav2</a> <div class="nav2childnav childnav"> <h3>ナビ2 子メニュータイトル</h3> <ul> <li><a href="#">nav2child1</a></li> <li><a href="#">nav2child2</a></li> <li><a href="#">nav2child3</a></li> <li><a href="#">nav2child4</a></li> <li><a href="#">nav2child5</a></li> </ul> </div> </li> <li><a href="#">nav3</a> <div class="nav1childnav childnav"> <h3>ナビ3 子メニュータイトル</h3> <ul> <li><a href="#">nav3child1</a></li> <li><a href="#">nav3child2</a></li> <li><a href="#">nav3child3</a></li> <li><a href="#">nav3child4</a></li> <li><a href="#">nav3child5</a></li> </ul> <div class="img"><img src="http://dummyimage.com/200x160/000/fff.png&text=dummy" alt=""></div> </div> </li> <li><a href="#">nav4</a> <div class="nav1childnav childnav"> <h3>ナビ4 子メニュータイトル</h3> <ul> <li><a href="#">nav4child1</a></li> <li><a href="#">nav4child2</a></li> <li><a href="#">nav4child3</a></li> <li><a href="#">nav4child4</a></li> <li><a href="#">nav4child5</a></li> </ul> </div> </li> </ul>
CSS
ul.nav, ul.nav ul{ margin-left:0; padding-left:0; list-style-type: none; } ul.nav{ position: relative; margin:20px 0; width:15em; border:1px solid #ddd; border-bottom: none; } ul.nav a{ display: block; text-decoration: none; } ul.nav a:hover{ background:#efefef; } ul.nav>li{ /*position: relative;*/ width:15em; border-bottom: 1px solid #ddd; } ul.nav>li>a{ padding:10px 15px; } ul.nav li .childnav{ display: none; padding:10px; border:1px solid #ccc; } ul.nav li:hover .childnav{ display: block; position:absolute; left:15em; top:0; min-width:400px; } .childnav h3{ color:#c00; font-size:16px; font-weight: bold; } .chilnav ul{ margin-bottom:20px; } .childnav li{ position: relative; padding-left:10px; } .childnav li:before{ content:""; display: inline-block; position:absolute; top:10px; left:0; width:0; height:0; border:6px solid transparent; border-left-color:#ccc; } .childnav li a{ padding:5px; border-bottom: none; } .childnav li a:hover{ color:#c00; text-decoration: underline; background: none; }
サンプルHTML
http://shibamaru.s602.xrea.com/demo/vertical_dropdownnav.html
IEで動作確認していないので崩れているかも・・・・