リンクホバー時のみ、詳細なナビゲーションリストを表示させたい

Question

実現したいこと

添付画像のようにナビゲーションの「在宅クリーニング」にカーソルが乗ったときに、詳細なナビゲーションリスト（背景青色で囲われている要素たち）を表示させてカーソルが離れた時には非表示にされるようにしたい。

発生している問題・分からないこと

「在宅クリーニング」にカーソルが乗っていても、離れていてもずっと表示されたままになってしまう。

該当のソースコード

<header class="header">
  <!-- ハンバーガーメニュー・SP用 -->
  <button id="bt-hamburger" onclick="document.getElementById('nav-sp').style.display = 'block'">
    <img src="assets/img/bt-hamburger.png" alt="ナビゲーションを開く">
  </button>

 <!-- ナビゲーション・SP用 -->
 <div id="nav-sp">
    <button id="bt-close" onclick="document.getElementById('nav-sp').style.display = 'none'">
      <img src="assets/img/bt-close.png" alt="ナビゲーションを閉じる">
    </button>
   <!--メニューリスト・SP用 -->
   <nav class="nav-sp-list">
     <ul>  
       <li><a class="menu-sp" href="index.html" onclick="document.getElementById('nav-sp').style.display = 'none'">ホーム</a></li>
       <li><a class="menu-sp" href="vacant-room.html" onclick="document.getElementById('nav-sp').style.display = 'none'">空室クリーニング</a></li>    
       <li><a class="menu-sp" href="at-home.html" onclick="document.getElementById('nav-sp').style.display = 'none'">在宅クリーニング</a></li>     
       <li><a class="menu-sp" href="about.html" onclick="document.getElementById('nav-sp').style.display = 'none'">店舗概要</a></li> 
       <li class="menu-sp-bottom"><a class="menu-sp" href="contact.html" onclick="document.getElementById('nav-sp').style.display = 'none'">問い合わせ</a></li> 
     </ul>
   </nav>
 </div>
  

  <!-- 店名ロゴ -->
  <div class="shop-logo-layout">
    <a href="#">
      <img class="shop-logo-header" src="assets/img/top/shop-logo-header-02.png" alt="">
    </a>
  </div>
  <!-- PC用ナビゲーション -->
  <nav>
    <ul>
      <li><a href="index.html">ホーム</a></li>
      <li><a href="vacant-room.html">空室クリーニング</a></li>
      <li><a href="at-home.html">在宅クリーニング</a></li>
      <li><a href="about.html">店舗概要</a></li>
      <li><a href="contact.html">問い合わせ</a></li>
    </ul>
  </nav>

  <section class="nav-more active">
    <div class="list-top">
      <div class="list-01">
        <div class="list-01-first">
          <h3>＞　空室クリーニング</h3>
          <a href="vacant-room.html">ー　空室クリーニング</a>  
        </div>
        <div class="list-01-second">
          <h3>＞　エアコンのお掃除</h3>
          <a href="at-home-01.html">ー　エアコンクリーニング</a>  
        </div>
      </div>
      
      <div class="list-02">
        <h3>＞　外回りのお掃除</h3>
        <a href="at-home-10.html">ー　玄関クリーニング</a>
        <a href="at-home-11.html">ー　ベランダクリーニング</a>
        <a href="at-home-09.html">ー　窓・サッシクリーニング</a>
      </div>

      <div class="list-03">
        <h3>＞　インターネット設定</h3>
        <a href="at-home-12.html">ー　インターネット設定代行</a>
      </div>
    </div>

    <div class="list-bottom">
      <div class="list-03">
        <div class="list-03-first">
          <h3>＞　水まわりのお掃除</h3>
          <a href="at-home-02.html">ー　浴室クリーニング</a>
          <a href="at-home-08.html">ー　洗面所クリーニング</a>
          <a href="at-home-07.html">ー　トイレクリーニング</a>  
        </div>

        <div class="list-03-second">
          <h3>＞　キッチンのお掃除</h3>
          <a href="at-home-06.html">ー　キッチンクリーニング</a>
          <a href="at-home-05.html">ー　ファンタイプ・レンジフードクリーニング</a>
          <a href="at-home-04.html">ー　プロペラタイプ・レンジフードクリーニング</a>  
        </div>
      </div>
      
      <div class="list-04">
        <h3>＞　お得なセットプラン</h3>
        <a href="set-plan.html#set-01">ー　2点セット(浴室、レンジフード)</a>
        <a href="set-plan.html#set-02">ー　2点セット(キッチン、レンジフード)</a>
        <a href="set-plan.html#set-03">ー　3点セット(浴室、キッチン、レンジフード)</a>
        <a href="set-plan.html#set-04">ー　4点セット(浴室、キッチン、レンジフード、洗面所)</a>
        <a href="set-plan.html#set-05">ー　5点セット(浴室、キッチン、レンジフード、洗面所、トイレ)</a>

      </div>
    </div>
  </section>
</header>

.header {
  margin-left: 15%;  // padding-left ではなく margin に
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* 追加 */
  padding-right: 9.3%;
  // スマホレイアウト
  @media screen and (max-width: 768px){
    all: unset; /* すべてのプロパティをリセット */
  }

  // ナビゲーション
  > nav {
    flex-grow: 1;
    // スマホレイアウトの際には非表示にする
    @media screen and (max-width: 768px){
      display: none;
    }

    > ul {
      display: flex;
      justify-content: flex-end;
      list-style: none;
      padding: 0;

      > li {
        margin-right: 20px;
      }
    }
  }
}
// ナビゲーション・リンクホバー時
/* 方法① シンプルに下線を表示させる場合 */
.header nav ul li a:hover {
  text-decoration: underline;
}

// 店名ロゴ・スマホレイアウト
.shop-logo-layout{
  @media screen and (max-width: 768px){
   display: flex;
   justify-content: center; /* 横方向に中央揃え */
   flex: 1;                  /* スペースを均等に確保（必要に応じて） */
  }
}
.shop-logo-header {
  @media screen and (max-width: 768px){
    display: block;
    margin: 0 auto;  
  }
}

// ハンバーガーメニューボタン
#bt-hamburger{
  display: none;
  @media screen and (max-width: 768px){
    display: block;
    position: fixed;
    top: 15px;
    left: 4.7%;  
    z-index: 90; 
  }
}

// ナビゲーション閉じるボタン
#bt-close{
  display: none;
  @media screen and (max-width: 768px){
    display: block;
    position: fixed;
    top: 15px;
    left: 4.7%; 

  }
}

// ナビゲーション・SP用
#nav-sp{
  display: none;
  @media screen and (max-width: 768px){
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100vw;  /* 画面幅いっぱい */
    height: 100vh;
    display: none;
    z-index: 99;
  }
}

// ナビゲーションリスト・SP用
.nav-sp-list{
  display: none;
  @media screen and (max-width: 768px){
    display: block;
    padding-left: 4.7%;
    padding-right: 4.7%;
    padding-top: 150px;

    >ul >li{
      padding: 20px 35.6% 20px 7.1%;
      font-family: "Axiforma";
      font-size: 20px;
      border-top-width: 1px;
      border-top-color: #0047AB;
      border-top-style: solid;
 
      a:hover{
        text-decoration: underline;
      }
    }
  }
}

.menu-sp-bottom{
  @media screen and (max-width: 768px){
    border-bottom-width: 1px;
    border-bottom-color: #0047AB;
    border-bottom-style: solid;    
  }
}

// 「在宅クリーニング」ホバー時に出現するメニューリスト
.nav-more.active{
  display: block;
  position: absolute;
  top: 65px;
  width: 85%;
  height: 100vh;
  background-color: #0047AB;
  color: #FFFAFA;
  z-index: 99;
  border-radius: 10px;
  padding: 50px;
}

.nav-more{
  display: none;
}


.list-top, .list-bottom{
  display: flex;
  margin-bottom: 50px;
  gap: 10%;
}

// ＞空室クリーニング
.list-01-first, .list-03-first{
  margin-bottom: 50px;
  >h3{
    color: #FFFAFA;
  }
  >a{
    display: block;
    margin: 4px 0; /* 上下の間隔を少し空ける（お好みで） */
  }
}

// ＞エアコンのお掃除
.list-01-second, .list-02, .list-03, .list-03-second, .list-04{
  display: block;
  >h3{
    color: #FFFAFA;
  }
  >a{
    display: block;
    margin: 4px 0; /* 上下の間隔を少し空ける（お好みで） */
  }
}


// ヘッダーここまで

$(document).ready(function(){

  // ヘッダーの読み込み
  $(function(){
    $("#header-placeholder").load("../includes/header.html");
  });

  // フッターの読み込み
  $(function(){
    $("#footer-placeholder").load("../includes/footer.html");
  });

  // トップ画像のカルーセル設定
  $('.top-photo-carousel').slick({
    autoplay: true,
    dots: true,
    arrows: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 700,
    autoplaySpeed: 3000,
  });

  // トップ・サービス一覧の切り替え表示
  $('.bt-switching').click(function () {
    // ボタンのアクティブ切り替え
    $('.bt-switching').removeClass('active');
    $(this).addClass('active');

    // クリックされたボタンが何番目かを取得
    const index = $('.bt-switching').index(this);

    // service-listを切り替え
    $('.service-list').removeClass('show').eq(index).addClass('show');
  });

  // トップ・「在宅クリーニング」ホバー時に切り替え表示させるメニューリスト

  // 「在宅クリーニング」リンクと.nav-moreを取得
  const $atHomeLink = $('nav ul li a[href="at-home.html"]');
  const $navMore = $('.nav-more');

  // ホバー時に.activeを追加
  $atHomeLink.hover(
    function () {
      $navMore.addClass('active');
    },
    function () {
      // 少し時間を置いて、.nav-more内にマウスがあるかを確認
      setTimeout(function () {
        if (!$navMore.is(':hover')) {
          $navMore.removeClass('active');
        }
      }, 100);
    }
  );

  // nav-more自体にもホバー判定を追加（ホバー中は表示を保つ）
  $navMore.hover(
    function () {
      $navMore.addClass('active');
    },
    function () {
      $navMore.removeClass('active');
    }
  );
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

何も変化しなかった。

補足

特になし

Comments

[yambejp]

挙動が確認できないのに加え、仕様がよくわかりません。
なにをしたらどうなるをもう少し明確にされるとよいでしょう。

Answer 1

特定の要素にhoverしたとき別の要素が表示される、ただし別の要素が表示されても元のhoverが外れない・・・といことであればただのCSSで実現できます。以下適当なサンプル

<style>
body:has([data-view-selector=".a"]:not(:hover)) .a{display:none;}
body:has([data-view-selector=".b"]:not(:hover)) .b{display:none;}
</style>
<ul>
<li data-view-selector=".a">a</li>
<li data-view-selector=".b">b</li>
<li>c</li>
</ul>
</nav>
</div>
<section>
<div class="a">
<ul>
<li>a1</li>
<li>a2</li>
<li>a3</li>
</ul>
</div>
<div class="b">
<ul>
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ul>
</div>
</section>

ちなみにナビにhoverして詳細メニューがでるとして、離れたとこりにある限り詳細メニューはおせません（ナビのhoverが外れてしまうため）
ちゃんとやるなら構造から精査したほうがよいでしょう

Answer 2

こうでしょうか？

.nav-more h3 ~ a {
    display: none;
}
.nav-more h3:hover ~ a {
    display: block;
}