【WordPress】ホバーで親子メニューがわかるヘッダーの作り方

<?php 
//ヘッダー、フッターのカスタムメニュー化
register_nav_menus(
    array(
        'place_global' => 'ヘッダーナビ',
        'place_footer' => 'フッターナビ',
    )
);
?>

<header class="header">
    <div class="header__inner">
        <nav class="header__nav">
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'place_global', //functions.phpで指定した位置
                    'container' => false, //デフォルト生成のdivタグを抑制
                    'menu_class' => 'header__nav-list' //スタイリングのためのクラスを指定
                )
            );
            ?>
        </nav>
    </div>
</header>

<header class="header">
    <div class="header__inner">
        <nav class="top__nav fade-cont">
            <ul class="header__nav-list">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2677"><a href="#">会社紹介</a>
                    <ul class="sub-menu">
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2680"><a href="#">会社概要</a></li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2679"><a href="#">代表メッセージ</a></li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2678"><a href="#">スタッフ紹介</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>

.header__nav-list {
  display: flex;
  gap: 1px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header__nav-list > li {
  width: 50%; /* liタグやaタグのcssはデザインに合わせて適宜変更してください */
}
.menu-item a {
  display: block;
  text-decoration: none;
  padding: 10px 30px;
  color: black;
  text-align: center;
}
.menu-item-has-children {
  position: relative;
}
.menu-item-has-children > a {
  background-color: gray;
  color: white;
  font-weight: 700;
}
.sub-menu {
  display: none; /* 初期状態では非表示 */
  list-style: none;
  position: absolute;
  top: 100%; /* 親メニューの下に配置 */
  left: 0;
  background-color: silver;
  width: 100%; /* 親メニューの横幅に合わせる */
  margin: 0;
  padding: 0;
}
.sub-menu li:nth-child(n+2) {
  border-top: 1px solid white;
}
.sub-menu li > a:hover {
  opacity: 0.4;
}
.menu-item-has-children:hover .sub-menu {
  display: block; /* ホバー時に表示 */
}

/* レスポンシブ設定（画面幅768px以下） */

@media screen and (max-width:768px){
  .menu-item a {
    padding: 10px 5px;
  }
}