【お知恵をお貸しください】JQueryでの:nth-child指定がうまく動作しない

Question

実現したいこと

グローバルメニューの一番最初の項目のみにプルダウンメニューを実装したい。

前提

<ul class="main-menu">の中の最初の<li>に入れ子で<ul class="sub-menu">を記述。

発生している問題・エラーメッセージ

JQueryで動かしたいのですが、.main-menu li:nth-child(1) とセレクタ指定しても動きません。
.main-menuのみで指定すると動くのですが、他のメニュー項目にも適用されてしまうので望む動きにはならず困っています。

該当のソースコード

   <nav id="g-nav">
      <div id="g-nav-list">
        <ul class="main-menu">
          <li><a href="#service">事業内容</a></li>
             <ul class="sub-menu"
              <li><a href="#">aaaaaaa</a></li>
              <li><a href="#">bbbbbbb</a></li>
             </ul>
          <li><a href="#news">ニュース</a></li>
          <li><a href="#message">メッセージ</a></li>
          <li><a href="#company">会社概要</a></li>
        </ul>
      </div>
    </nav>

/*ナビゲーション*/

  #g-nav {
    display: block;
    right: 380px;
    position: absolute;
  }
  .main-menu {
    display: flex;
    text-align: right;
    padding-top: 18px;
    list-style: none;
  }
   .main-menu li a {
    color: #333;
    text-decoration: none;
    padding-top: 20px;
    display: block;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
    vertical-align: middle;
  }
  .sub-menu {
    position: absolute;
    margin-left: -6px;
    padding: 0;
    display: none;
  }
  .sub-menu li a {
    padding: 5px;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: -5px;
    display: block;
    color: #333;
    text-decoration: none;
  }
  .sub-menu li a:hover {
    background: #FFCA7B;
  }

  $(function() {
    $(".main-menu li:nth-child(1)").hover(
      function() {
        $(".sub-menu:not(:animated)", this).slideDown();
      },
      function() {
        $(".sub-menu", this).slideUp();
      }
    );
  });

試したこと

.main-menu li:nth-child(1)ではなく、該当liにclassを指定してみたものの、これも動作せずでした。
CSSで.main-menu li:nth-child(1)に背景色を指定した際は反映されました。

どこに誤りがあるのかお知恵を拝借できましたら幸いです。
よろしくお願いいたします。

Comments

[maisumakun]

> <ul class="main-menu">の中の最初の<li>に入れ子で<ul class="sub-menu">を記述。

そもそものHTML構造がそうなっていないのですが、コードと言葉とどちらが意図通りですか？

[yktd0430]

単純にコードが間違っておりました。。。
このような単純ミスに気づけないとはお恥ずかしい限りです。
気づかせていただきありがとうございました。

Answer 1

入れ子になっていないという単純ミスでした。