###前提・実現したいこと
マウスホバー時に出てくるドロップダウンメニューを吹き出しのようにしたいです。
上に三角がありその下にメニューボックスが現れるようにどうにかできないものでしょうか?
Before、afterでつけようとしたのですが、メニューボックスの中に三角が入ってしまい・・・
どなたかおたすけください><
###該当のソースコード
html
1 <nav class="main-navi"> 2 <ul id="main-menu"> 3 <li><a href="#">メインメニュー1</a></li> 4 <li><a href="#">メインメニュー11111</a></li> 5 <li><a href="#">メインメニュー1111111</a> 6 <ul class="sub-menu triangle"> 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="#">メインメニュー11111</a></li> 13 <li><a href="#">メインメニュー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 ul#main-menu li:nth-child(3){ 5 position: relative; 6} 7.main-navi>#main-menu li{ 8 display: inline-block; 9 flex: auto; 10 -webkit-flex: auto; 11} 12.main-navi ul#main-menu ul.sub-menu { 13 background-color: #fff; /* サブメニュー全体の背景色 */ 14 border-width: 2px; /* サブメニュー全体の枠線の太さ */ 15 border-style: solid; /* サブメニュー全体の枠線の線種 */ 16 border-color: #72b44a; /* サブメニュー全体の枠線の色 */ 17 margin: 0px; 18 padding: 0px; 19 display: none; 20 position: absolute; 21 left: -30%; 22 top: 50px; 23 } 24.main-navi ul#main-menu ul.sub-menu li{ 25 width: 250px; /* サブメニュー1項目の横幅 */ 26 height: 35px; /* サブメニュー1項目の高さ */ 27 border-width: 0px 0px 1px 0px; /* サブメニュー1項目の枠線の太さ */ 28 border-style: dotted; /* サブメニュー1項目の枠線の線種 */ 29 display: block; 30} 31.main-navi ul#main-menu ul.sub-menu li:last-child{ 32 border-style: none; 33} 34.main-navi ul#main-menu ul.sub-menu li a { 35 line-height: 35px; /* サブメニュー1項目の行の高さ(「サブメニュー1項目の高さ」と合わせる) */ 36 text-align: center; /* サブメニュー1項目の項目名の配置(左寄せ) */ 37 text-indent: 5px; /* サブメニュー1項目の項目名前方の余白 */ 38} 39.triangle:before{ 40 content: ""; 41 width: 0; 42 height: 0; 43 border-style: solid; 44 border-width: 0 15px 26.0px 15px; 45 border-color: transparent transparent #73b44a transparent; 46 line-height: 0px; 47 _border-color: #000000 #000000 #73b44a #000000; 48 _filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 49} 50
javascript
1$(function(){ 2 $("#main-menu li").hover(function(){ 3 $("ul",this).show(); 4 }, 5 function(){ 6 $("ul",this).hide(); 7 }); 8 }); 9
回答3件
あなたの回答
tips
プレビュー