###実現したいこと
下記の参考サイトのようなドロップダウンメニューを実装したいと考えています。
http://kachibito.net/snippets/horizontal-subnav
http://jquery.kachibito.net/menu/horizontal-subnav.html
このグレーの階層の下に更にもう一つ階層を作成したいのですが、その場合どのように調整を行えばよろしいのでしょうか。
参考になるサイトなどご教示頂けますと幸いです。
宜しくお願い致します。
追記:
下記現在のコードとなります。
html
1<ul id="topnav" class="visible-xs"> 2 <li><a href="#"><img src="img/sp/area.png" alt="場所で探す" class="img-responsive"></a> 3 <span><a href="#">タブ1-1</a> 4 |<a href="#">タブ1-2</a></span> 5 </li> 6 <li><a href="#"><img src="img/sp/category.png" alt="カテゴリーで探す" class="img-responsive" width="237px" height="187px"></a> 7 <span><a href="#">タブ2-1</a>|<a href="#">タブ2-2</a>|<a href="#">タブ2-3</a></span> 8 </li> 9 <li><a href="#"><img src="img/sp/store.png" alt="店舗で探す" class="img-responsive"></a> 10 <span><a href="#">タブ3-1</a>|<a href="#">タブ3-2</a>|<a href="#">タブ3-3</a>|<a href="#">タブ3-4</a></span> 11 </li> 12</ul>
CSS
1ul#topnav { 2 margin-bottom: 50px; padding: 0; 3 float: left; 4 width: 100%; 5 list-style: none; 6 position: relative; 7 font-size: 1.2em; 8 background: #ffa6a6 !important; 9} 10ul#topnav li { 11 float: left; 12 margin: 0; padding: 0; 13 border-right: 1px solid #9a9a9a; 14 display: inline-block; 15 width: 32%; 16} 17 18ul#topnav li:last-child{ 19 border-right: none; 20} 21 22ul#topnav li a { 23 padding: 10px 15px; 24 display: block; 25 color: #444; 26 text-decoration: none; 27} 28ul#topnav li:hover { background: #eee ; } 29ul#topnav li span { 30 float: left; 31 padding: 15px 0; 32 position: absolute; 33 left: 0; top:35px; 34 display: none; 35 width: 100%; 36 background: #eee; 37 color: #000; 38 39} 40ul#topnav li:hover span { display: block; } 41ul#topnav li span a { display: inline; } 42ul#topnav li span a:hover {text-decoration: underline;}
jQuery
1<script type="text/javascript"> 2 $(document).ready(function() { 3 //ホバーイベント 4 $("ul#topnav li").hover(function() { 5 //背景カラーを与える 6 $(this).css({ 7 'background': '#eee' 8 }); 9 //li要素からspan要素を探して表示する 10 $(this).find("span").show(); 11 12 }, function() { 13 //マウスが外れたら非表示に戻す 14 $(this).css({ 15 'background': 'none' 16 }); 17 $(this).find("span").hide(); 18 }); 19}); 20</script>
回答1件
あなたの回答
tips
プレビュー