マウスオーバーメニューで子要素にホバーすると認識されない。（模写コーディング）

Question

前提・実現したいこと

「住友商事」さんの模写コーディングを行っています。
ヘッダー部分のマウスオーバーしたら出てくるメニューを作りたいです。

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

親要素（nav-wrap）をマウスオーバーして子要素（content)が出てくるまでは出来たのですが、出てきた（content）にマウスを移動すると、
マウスオーバーの判定が外れてしまい、すぐに戻ってしまいます。
エラーメッセージは出ていません。

該当のソースコード

 <nav id="pc-nav">
      <ul class="glonav">
        <li class="nav-wrap no-border">
          <a href="#" class="navlink">企業情報<i class="fas fa-chevron-down nav-180"></i></a>
            <div class="content">
              <div class="navbox container">
                <div class="row">
                  <div class="col-3">
                    <a href="">
                    <div class="navimg">
                      <img src="img/header/megaNavigation_about_thumb01.jpg">
                      <span>企業情報</span>
                      <i class="fas fa-angle-right"></i>
                    </div>
                    </a>
                  </div>
                  <div class="navbox-1 col-3">
                    <ul>
                      <li><a href="#">社長メッセージ</a></li>
                      <li><a href="#">理念と戦略</a></li>
                      <li><a href="#">コーポレートメッセージ</a></li>
                      <li><a href="#">会社概要</a></li>
                      <li><a href="#">役員一覧</a></li>
                    </ul>
                  </div>
                  <div class="navbox-border col-3">
                    <ul>
                      <li><a href="#">沿革</a></li>
                      <li><a href="#">組織図</a></li>
                      <li><a href="#">事業部部門概要</a></li>
                      <li><a href="#">国内・海外拠点</a></li>
                      <li><a href="#">主要グループ会社</a></li>
                    </ul>
                  </div>
                  <div class="navbox-border col-3">
                    <ul>
                      <li><a href="#">コーポレートガバナンス</a></li>
                      <li><a href="#">人材マネジメント</a></li>
                      <li><a href="#">会社紹介・広告</a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="aboutbottom">
                <img src="img/header/megaNavigation_about_pickup01.jpg">
              </div>
            </div>
        </li>
        <li class="nav-wrap">
          <a href="#" class="navlink">事業紹介<i class="fas fa-chevron-down nav-180"></i></a>
          <div class="content">
            <div class="navbox container">
              <div class="row">
                <div class="col-3">
                  <a href="">
                  <div class="navimg">
                    <img src="img/header/megaNavigation_business_thumb01.jpg">
                    <span>事業紹介</span>
                    <i class="fas fa-angle-right"></i>
                  </div>
                  </a>
                </div>
                <div class="gbcase col-3">
                  <h3>グローバル事例</h3>
                  <img src="img/header/megaNavigationaboutcase01jpg.jpg">
                </div>
                <div class="navbox-border col-6">
                  <h3>最新事例</h3>
                  <ul>
                    <li><a href="#"><span class="ellipsis">欧州における数々の洋上風力発電プロジェクトに参画</span><br>（ドイツ／ベルギー／イギリス ／ フランス）</a></li>
                    <li><a href="#"><span class="ellipsis">24時間365日、お客さまに心躍る瞬間を　―ジュピターショップチャンネル―</span><br>（日本）</a></li>
                    <li><a href="#"><span class="ellipsis">人々の生活を広範にサポートする日本最大のケーブルテレビ企業　―ジュピターテレコム―</span><br>（日本）</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </li>

....(以下も続きますが省略）

---

$("ul.glonav > li").hover(function(){
    $("div:not(:animated)", this).slideDown("fast");
}, function() {
    $("div.content", this).slideUp("fast");
});

---

.glonav {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  border-top: 1px solid #e5e5e5;
  background: #fff;
  .nav-wrap {
    display: inline-block;
    width: 100%;
    text-align: center;
    &:hover {
      background-color: #b5dedb;
    }
    &:hover .nav-180{
      transform: rotate(180deg);
      }
    .nav-180 {
    margin-left: 5px;
    }
    .navlink {
      position: relative;
      display: block;
      color: #111;
      text-decoration: none;
      width: 100%;
      padding: 20px 0;
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 5px;
        height: 40px;
        width: 1px;
        background-color: #e5e5e5
      }
    }
  }
}
// 共通
.content {
  position: absolute;
  display: none;
  background: #003333;
  width: 100%;
  left: 0;
  z-index: 1;
}

試したこと

まず参考にしたサイト：こちらのサイトです
これでできなかったので、下記のサイトを参考に現在のコード
（現在）参考サイト：こちらのサイトです

また、こちらのサイトを参考に、ホバーされている要素取得も行ってみましたが、
全く実装できませんでした。
こちらのサイトです

補足情報（FW/ツールのバージョンなど）

vscodeの1.46．1で書いています。
jquery/2.1.3です。

コードが長たらしくなって申し訳ありませんが、よろしくお願いいたします。

Comments

[Lhankor_Mhy]

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7

[aachan]

ありがとうございます。
見にくくて申し訳ありませんでした。
用いてみたのですが大丈夫でしょうか。よろしくお願いいたします。

Answer 1

こんにちは。

contentでもホバーが効くようにすればいいと思います。
サンプルを作成しました。

サンプル

$("ul.glonav > li, ul.glonav > .content").hover(
  //...
);

Comments

[aachan]

サンプルまでご用意いただきありがとうございます。
いただいたサンプルのJavascriptのコードをそのままコピーしてみたのですが、それでも反応しませんでした。（いただいたサンプルのリンクをクリックして飛んだ先では、私のPCからも実現したい動きになっています）
キャッシュクリア、Cookieのクリアしてもダメでした。。。
コードではなく、何かほかに問題があるのでしょうか…
サンプルまでいただいたのに申し訳ありません。

[aachan]

何度も申し訳ありません。記載した下のcssを全部消して試してみたら実現できました!!
どうやら、下のcssが邪魔をしていたようです。
これからcssの何が原因だったか調べていこうと思います。
ご丁寧に教えていただき、ありがとうございました。

[Lhankor_Mhy]

ご解決されて何よりでした。