hoverして、2階層目のメニューを表示させたい

Question

前提

headerのnavをhoverしてメニューを表示させる機構で、表示が上手くいきません。

実現したいこと

hoverして、2階層目のメニューを表示させたい。

該当のソースコード

ソースコード
<header class="header">
    <div class="header__inner">
      <h1>
        <a href="index.html">
          <img src="img/header__logo.png" alt="ロゴ" class="header__logo">
        </a>
      </h1>
      <div class="header__btn"><span></span><span></span><span></span></div>
      <nav class="nav">
        <div class="nav__list--scroll">
          <ul class="nav__list">
            <li><a href="1-2.html#">HOME</a></li>
            <li class="has-child"><a href="1-2.html#">コース</a>
              <ul>
                <li><a href="1-2.html#">コース紹介</a></li>
                <li><a href="1-2.html#">タイトル</a></li>
                <li><a href="1-2.html#"><タイトル/a></li>
                <li><a href="1-2.html#">タイトル</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>
```CSS
/* ===ヘッダーのデザイン=== */
.header {
  background-color: var(--white-color);
  width: 100%;
  position: fixed;
  height: 5rem;
  z-index: 900;
  display: flex;
  align-items: center;
}

.header__inner {
  position: fixed;
  padding: 6px 16px;
  width: 100%;
  height: 5rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  z-index: 900;
}

/* ヘッダーのロゴ */
.header__logo {
  width: 20rem;
}

/* ===ヘッダー終了=== */

/* ===ハンバーガーボタン開始=== */
.header__btn {
  position: fixed;
  position: absolute;
  z-index: 9999;
  right: 0;
  cursor: pointer;
  width: 50px;
  height: 50px;
}

/*×に変化*/
.header__btn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 16px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--text-color);
  width: 45%;
}

.header__btn span:nth-of-type(1) {
  top: 15px;
}

.header__btn span:nth-of-type(2) {
  top: 23px;
}

.header__btn span:nth-of-type(3) {
  top: 31px;
}

.header__btn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.header__btn.active span:nth-of-type(2) {
  opacity: 0;
}

.header__btn.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

/* ===ハンバーガーボタン終了=== */

/* ===ナビゲーション開始=== */
.nav {
  position: fixed;
  z-index: 999;
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-color);
  transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
.nav.panelactive {
  right: 0;
}

/*ナビゲーションの縦スクロール*/
.nav.panelactive,
.nav__list--scroll {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.nav__list {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

.nav__list li.has-child ul {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  visibility: visible;
  opacity: 1;
  display: none;
}

.nav__list a {
  text-decoration: none;
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  color: var(--text-color);
  padding: 2rem 3.5rem;
  transition: all .3s;
}


.nav__list li ul li {
  border-bottom: solid;
  margin: 0 auto;
  width: 70%;
}

.nav__list li ul li:last-child {
  border-bottom: none;
}

.nav__list li ul li a{
  padding: .8rem;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
.nav__list li {
  position: relative;
}


/* 矢印の設定*/
.nav__list li.has-child::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 30px;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--text-color);
  border-right: 2px solid var(--text-color);
  transform: rotate(135deg);
}

.nav__list li.has-child.active::before {
  content: '';
  position: absolute;
  transform: rotate(-45deg);
  top: 30px
}

/* ===ナビゲーション終了=== */
/* ===PCのデザイン=== */
@media screen  and (min-width:1025px){
  /* header */
  .header {
    height: 8rem;
    z-index: 0;
  }

  .header__inner {
    position: fixed;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header__logo {
    width: 30rem;
  }

  .header__btn {
    display: none;
  }

  .nav {
    position: static ;
    z-index: auto;
    height: 8rem;
    background-color: transparent;
    overflow-y: scroll;
    -ms-overflow-style: none;    /* IE, Edge 対応 */
    scrollbar-width: none;       /* Firefox 対応 */
    z-index: 0;
    }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav__list {
    position: static;
    transform: none;
    display: flex;
    justify-content: flex-end;
  }

  .nav__list li a {
    position: static;
    padding: 0 1.6rem;
  }

  .nav__list--scroll {
    position: static;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .nav__list li.has-child::before {
    left: 1px;
    top: 10px;
  }

  .nav__list  li {
    position: relative;
  }

  .nav__list li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:0;
	top:80px;
	z-index: 4;
    /*形状を指定*/
	background:blue;
	width:180px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 1;
    /*アニメーション設定*/
	transition: all .3s;
  padding: 0;
  display: block;
  color:red;
  }

  .nav__list li.has-child a:hover > ul,
.nav__list li.has-child ul li a:hover > ul,
.nav__list li.has-child a:active > ul,
.nav__list li.has-child ul li a:active > ul{
  visibility: visible;
  opacity: 1;
  display: block;
  color: red;
}

}

### 補足情報
https://coco-factory.jp/ugokuweb/move01-cat/globalnavigation/
を参考に制作しました。

ここにより詳細な情報を記載してください。

Answer 1

子メニューの親要素の .nav や .nav__list--scroll に overflowプロパティではみ出した部分を非表示にしているので、子メニューが表示されない状態です。子メニューは親要素の外に配置されてますので。
下記のようにはみ出した部分も表示できるようにしましょう。

/* ===PCのデザイン=== */
@media screen  and (min-width:1025px){

  /* 中略 */

  .nav {
    position: static ;
    z-index: auto;
    height: 8rem;
    background-color: transparent;
  /*  overflow-y: scroll;  削除 */
    overflow: visible; /* 追加 */
  
  /* 中略 */

  .nav__list--scroll {
    position: static;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible; /* 追加 */
  }

  /* 後略 */

次にホバーしたときのセレクターを
.nav__list li.has-child a:hover > ul
としてますが、>は子セレクターですが、ul要素はa要素の子ではないです。
すぐ後ろの要素ですので、隣接セレクターの+を使うべきです。
.nav__list li.has-child a:hover + ul

これで、a要素をホバーすると子メニューが表示されます。
ただ、子メニューをクリックしようと下に移動させると、a要素から外れるので子メニューは閉じてしまいます。
これでは子メニューをクリックできません。

これは、li.has-child a のホバーではなく、li.has-child のホバーに変更すれば解決できます。この場合は、子メニューのulは子要素になりますので子セレクターを使います。

/* 削除
  .nav__list li.has-child a:hover > ul,
  .nav__list li.has-child ul li a:hover > ul,
  .nav__list li.has-child a:active > ul,
  .nav__list li.has-child ul li a:active > ul 
*/
  .nav__list li.has-child:hover > ul,
  .nav__list li.has-child:active > ul {
    visibility: visible;
    opacity: 1;
    display: block;
    color: red;
  }

他にも微調整が必要そうですが、質問の趣旨からは外れますのでこの辺で。

Comments

[HIroki]

ありがとうございます。
無事に正しく表示されました。
そこは盲点でした。勉強になりました。