実現したいこと
グローバルメニューの一番最初の項目のみにプルダウンメニューを実装したい。
前提
<ul class="main-menu">の中の最初の<li>に入れ子で<ul class="sub-menu">を記述。発生している問題・エラーメッセージ
JQueryで動かしたいのですが、.main-menu li:nth-child(1) とセレクタ指定しても動きません。
.main-menuのみで指定すると動くのですが、他のメニュー項目にも適用されてしまうので望む動きにはならず困っています。
該当のソースコード
HTML
1 <nav id="g-nav"> 2 <div id="g-nav-list"> 3 <ul class="main-menu"> 4 <li><a href="#service">事業内容</a></li> 5 <ul class="sub-menu" 6 <li><a href="#">aaaaaaa</a></li> 7 <li><a href="#">bbbbbbb</a></li> 8 </ul> 9 <li><a href="#news">ニュース</a></li> 10 <li><a href="#message">メッセージ</a></li> 11 <li><a href="#company">会社概要</a></li> 12 </ul> 13 </div> 14 </nav>
CSS
1/*ナビゲーション*/ 2 3 #g-nav { 4 display: block; 5 right: 380px; 6 position: absolute; 7 } 8 .main-menu { 9 display: flex; 10 text-align: right; 11 padding-top: 18px; 12 list-style: none; 13 } 14 .main-menu li a { 15 color: #333; 16 text-decoration: none; 17 padding-top: 20px; 18 display: block; 19 font-size: 1.8rem; 20 font-weight: 500; 21 letter-spacing: 0.2rem; 22 vertical-align: middle; 23 } 24 .sub-menu { 25 position: absolute; 26 margin-left: -6px; 27 padding: 0; 28 display: none; 29 } 30 .sub-menu li a { 31 padding: 5px; 32 margin-left: -5px; 33 margin-right: -5px; 34 margin-bottom: -5px; 35 display: block; 36 color: #333; 37 text-decoration: none; 38 } 39 .sub-menu li a:hover { 40 background: #FFCA7B; 41 }
JQuery
1 $(function() { 2 $(".main-menu li:nth-child(1)").hover( 3 function() { 4 $(".sub-menu:not(:animated)", this).slideDown(); 5 }, 6 function() { 7 $(".sub-menu", this).slideUp(); 8 } 9 ); 10 });
試したこと
.main-menu li:nth-child(1)ではなく、該当liにclassを指定してみたものの、これも動作せずでした。
CSSで.main-menu li:nth-child(1)に背景色を指定した際は反映されました。
どこに誤りがあるのかお知恵を拝借できましたら幸いです。
よろしくお願いいたします。
回答1件