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

実現したいこと

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

前提

<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  });