ドロップダウンメニューを作成したが、出てきたメニューをクリックしようとするとすぐメニューが閉じてしまう。

ドロップダウンメニューをjqueryで作成したのですが、いざ開いたメニューをクリックしようとすると、
ホバー判定が外れて閉じてしまいます。
問題なくメニューをクリックできるようにしたいです。
何日も詰まっており、ご教授お願いできませんでしょうか。

jquery
$('.p-nav__sub').hide();

$('.p-nav__list').hover(function() {

$(".p-nav__sub:not(:animated)", this).slideDown();

}, function() {

$(".p-nav__sub",this).slideUp();
});

html
        <header class="l-header">
          <div class="l-header__container">
            <a href=""><img class="l-header__logo" src="./assets/images/icon1.png" alt="会社ロゴ" ></a>
            <nav class="p-nav">
              <ul class="p-nav__menu">
                <li class="p-nav__list">
                  <a href="" class="p-nav__button">MENS</a>
                  <ul class="p-nav__sub">
                    <div class="p-nav__container">
                      <li><a href="">MENSTOP</a></li>
                      <li>BRAND</li>
                      <li><a href="">ブランドを選択する</a></li>
                      <li>CATEGORY</li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">トップス</a></li>
                      <li><a href="">アウター</a></li>
                      <li><a href="">パンツ</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">オールインワン</a></li>
                      <li><a href="">スーツ</a></li>
                      <li><a href="">バッグ</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">シューズ</a></li>
                      <li><a href="">小物</a></li>
                      <li><a href="">アクセサリー</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">アンダーウェア</a></li>
                      <li><a href="">レッグウェア</a></li>
                      <li><a href="">帽子</a></li>
                    </div>
                  </ul>
                </li>
                <li class="p-nav__list">
                  <a href="" class="p-nav__button" id="p-nav__botton2">WOMENS</a>
                  <ul class="p-nav__sub">
                    <div class="p-nav__container">
                      <li><a href="">WOMENSTOP</a></li>
                      <li>BRAND</li>
                      <li><a href="">ブランドを選択する</a></li>
                      <li>CATEGORY</li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">トップス</a></li>
                      <li><a href="">アウター</a></li>
                      <li><a href="">パンツ</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">オールインワン</a></li>
                      <li><a href="">スーツ</a></li>
                      <li><a href="">バッグ</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">シューズ</a></li>
                      <li><a href="">小物</a></li>
                      <li><a href="">アクセサリー</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">アンダーウェア</a></li>
                      <li><a href="">レッグウェア</a></li>
                      <li><a href="">帽子</a></li>
                    </div>
                  </ul>
                </li>
                <li class="p-nav__list">
                  <a href="" class="p-nav__button" id="p-nav__botton3">SHOP LIST</a>
                </li>
              </ul>
            </nav>
            <div class="p-keyword">
              <input class="p-keyword__search" type="search"  placeholder="何かお探しですか">
              <ul class="p-keyword__container">
                <li class="p-keyword__list">
                  <a href=""><img class="p-keyword__glasses" src="./assets/images/icon2.png" alt="虫眼鏡"></a>
                </li>
                <li class="p-keyword__list">
                  <a href=""><img class="p-keyword__cart" src="./assets/images/icon3.png" alt="虫眼鏡"></a>
                </li>
              </ul>
              <a href="" class="p-keyword__count">0</a>
            </div>
            <div class="p-hamburger">
              <span class="p-hamburger__bar"></span>
              <span class="p-hamburger__bar"></span>
              <span class="p-hamburger__bar"></span>
            </div>
          </div>
        </header>

css
.l-header__container {
  display: flex;
  align-items: center;
}

.p-section:last-child {
  margin-top: 24px;
}

   .white-space: nowrap;
  }

  .l-header__container {
    justify-content: space-between;
  }

  .p-menu {
    display: none;
  }

  .p-hamburger__fade {
    display: none;
  }

  .p-login {
    width: 900px;
    margin: 0 auto;
  }

  .p-login__menu {
    display: flex;
    justify-content: flex-end;
  }

  .p-login__list:not(:last-child) {
    margin-right: 20px;
  }

  .p-login__button {
    color: #000;
    text-decoration: none;
    font-size: 12px;
  }

  .p-login__button:hover {
    text-decoration: underline;
  }

  .l-header {
    width: 900px;
    margin: 0 auto;
  }

  .l-header__logo {
    width: 200px;
    margin-right: 120px;
  }

  .p-nav__button {
    color: #000;
    text-decoration: none;
    font-weight: bold;
  }

  .p-nav__button:hover {
  color: #BBBBBB;
  }

  .p-nav__menu {
    display: flex;
  }

  .p-nav__list {
    margin-right: 60px;
  }

  .p-keyword__search {
    width: 150px;
    margin-right: 5px;
    border-right:none;
    border-left:none;
    border-top:none;
    border-width:1px;
  }

  .p-keyword__glasses {
    width: 20px;
  }

  .p-keyword__cart {
    width: 20px;
  }

  .p-keyword__count {
    color: #000;
    padding-top: 5px;
    text-decoration: none;
  }

  .p-keyword__count:hover {
    text-decoration: underline;
  }

  .p-keyword {
    display: flex;
  }

  .p-keyword__list:first-child:after {
    content: "";
    border-right:1px solid #000;
    padding-right: 16px;
  }

  .p-keyword__list:last-child {
    margin-left: 16px;
  }

  .p-keyword__container {
    display: flex;
    margin-right: 5px;
  }

  .p-section:first-child {
    padding-top: 24px;
    margin-bottom: 24px;
  }

  .p-nav__sub {
    background-color: #000;
    position: absolute;
    left:  0px;
    top: 135px;
    width: 100%;
  }

  .p-nav__sub > li > a:hover {
    text-decoration: underline;
  }

  .p-nav__container {
    padding-left: 520px;
  }

  .p-nav__container:not(:nth-child(1)) {
    display: flex;
  }

  .p-nav__container > li {
    width: 33%;
    margin-top: 16px;
    color: #fff;
  }

  .p-nav__container > li > a {
    color: #fff;
    text-decoration: none;
  }

  .p-nav__container > li > a:hover {
    text-decoration: underline;
  }

/* ナビゲーションをホバーしたとき下線 */
  .p-nav__list > a::after {
    border-bottom: solid 4px #000;
    content: "";
    display: block;
    width: 0;
    position: absolute;
    top: 85px;
  }

  .p-nav__list > a:hover::after {
    width: 50px;
  }

  #p-nav__botton2:hover::after {
    width: 80px;
  }

  #p-nav__botton3:hover::after {
    width: 100px;
  }
/*  */
}