###前提・実現したいこと
メインメニューを横並びにしてメニューホバー時に出てくるドロップダウンメニューを縦表示させたい。
###該当のソースコード
html
1 <nav class="main-navi"> 2 <ul id="main-menu"> 3 <li><a href="#"></span>メインメニュー1</a></li> 4 <li><a href="#"></span>メインメニュー11111</a></li> 5 <li><a href="#"></span>メインメニュー1111111</a> 6 <ul class="sub-menu"> 7 <li><a href="#">サブメニュー222222</a></li> 8 <li><a href="#">サブメニュー222222222222222</a></li> 9 <li><a href="#">サブメニュー222222222</a></li> 10 </ul><!-- .sub-menu --> 11 </li> 12 <li><a href="#"></span>メインメニュー11111</a></li> 13 <li><a href="#"></span>メインメニュー1111</a></li> 14 <li><a href="#">メインメニュー1</a></li> 15 <li><a href="#">メインメニュー111111111</a></li> 16 </ul> 17 </nav><!-- /.main-navi --> 18
css
1.main-navi{ 2 text-align: center; 3} 4.main-navi>#main-menu li{ 5 display: inline-block; 6 flex: auto; 7 -webkit-flex: auto; 8} 9.main-navi ul#main-menu ul.sub-menu { 10 background-color: #fff; /* サブメニュー全体の背景色 */ 11 border-width: 2px; /* サブメニュー全体の枠線の太さ */ 12 border-style: solid; /* サブメニュー全体の枠線の線種 */ 13 border-color: #72b44a; /* サブメニュー全体の枠線の色 */ 14 margin: 0px; 15 padding: 0px; 16 display: none; 17 position: absolute; 18} 19.main-navi ul#menu ul.sub-menu li { 20 21 width: 135px; /* サブメニュー1項目の横幅 */ 22 height: 35px; /* サブメニュー1項目の高さ */ 23 border-width: 0px 0px 1px 0px; /* サブメニュー1項目の枠線の太さ */ 24 border-style: dotted; /* サブメニュー1項目の枠線の線種 */ 25} 26.main-navi ul#menu ul.sub-menu li a { 27 line-height: 35px; /* サブメニュー1項目の行の高さ(「サブメニュー1項目の高さ」と合わせる) */ 28 text-align: center; /* サブメニュー1項目の項目名の配置(左寄せ) */ 29 text-indent: 5px; /* サブメニュー1項目の項目名前方の余白 */ 30} 31
javascript
1$(function(){ 2 $("#main-menu li").hover(function(){ 3 $("ul",this).show(); 4 }, 5 function(){ 6 $("ul",this).hide(); 7 }); 8 }); 9
###試したこと
floatなども試したのですが、そうすると長いメニューは改行されたり、途中で消えたりするのでできませんでした。。。
それも含めて解決策などあれば教えてもらえるとありがたいです
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/19 12:04