WordPressのグローバルナビを実装する方法

// カスタムメニューの「場所」を設定
register_nav_menu( 'header-navi', 'ヘッダーナビ' );

<!-- Navigation -->
<nav id="navi" class="navi" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
    <div id="navi-in" class="navi-in">
    <?php wp_nav_menu(
      array (
        //カスタムメニュー名
        'theme_location' => 'header-navi',
        //コンテナを表示しない
        'container' => false,
        //カスタムメニューを設定しない際に固定ページでメニューを作成しない
        'fallback_cb' => false,
        //出力されるulに対してidやclassを表示しない
        'items_wrap' => '<ul>%3$s</ul>',
      )
    ); ?>
  </div><!-- /#navi-in -->
</nav>
<!-- /Navigation -->

/************************************
** グローバルメニュー
************************************/
.navi-in{
  /*幅を整える場合はwidthを設定する*/
  /*width: 1000px;*/
}
.navi-in > ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.navi-in > ul li {
  display: block;
  width: 176px;
  height: 50px;
  line-height: 50px;
}
.navi-in > ul li:hover > ul {
  display: block;
}
/*サブメニュー*/
.navi-in > ul .sub-menu {
  display: none;
  position: absolute;
  margin-left: 0;
  min-width: 240px;
  list-style: none;
  padding-left: 0;
  background-color: #fafafa;
  z-index: 99;
  text-align: left;
}
.navi-in > ul .sub-menu li {
  width: auto;
}
.navi-in > ul .sub-menu a {
  padding-left: 16px;
  padding-right: 16px;
}
/*サブメニューのサブメニュー*/
.navi-in > ul .sub-menu ul {
  top: -50px;
  left: 240px;
  position: relative;
}
.navi-in a {
  color: #333;
  text-decoration: none;
  display: block;
  font-size: 16px;
}
.navi-in a:hover {
  background-color: #f3f3f3;
  transition: all 0.3s ease 0s;
}
.navi-in a:hover > ul {
  display: block;
}