<nav class="globalNavi--type001">
  <ul class="globalNavi__menu__main">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">メニュー名</a></li>
    <li><a href="#" class="--hasSubMenu">サブメニューを<br/>持つメニュー</a>
      <ul class="globalNavi__menu__sub">
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#" class="--hasSubMenu">サブメニューを<br/>持つメニュー</a>
          <ul class="globalNavi__menu__sub__sub">
            <li><a href="#">サブサブメニュー</a></li>
            <li><a href="#">サブサブメニュー</a></li>
            <li><a href="#">サブサブメニュー</a></li>
          </ul> 
        </li>
      </ul> 
    </li>
    <li><a href="#">メニュー名</a></li>
    <li><a href="#">メニュー名</a></li>
  </ul>
<!-- /.globalNavi --></nav>
                

.globalNavi--type001{
  display:block;
  .globalNavi__menu__main{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0 1em;
    >li {
      text-align:center;
      display:block;
      position: relative; /*z-indexの指定や子要素の基準とするために指定*/
      z-index: 2; /*ドロップダウンしたメニューが隠れないように*/
      border-radius: 0.3em;
      &:hover ul.globalNavi__menu__sub {
        width:150%;
        top: 3.9em;
        margin-left:-25%;
        visibility:visible;
        opacity: 1;
        display: block;    /*マウスオーバー時にサブメニューを表示する*/
      }
      a,span{
        background:rgba(0,0,0,0.1);
      }
      >a,>span {
        min-height:4em;
      }
    }
    li {
      a,span {
        color:#000;
        text-decoration:none;
        display:flex;
        flex-wrap:wrap;
        align-content:center;
        justify-content:center;
        padding:0.5em 2em;
        line-height:1.5em;
      }
      a:hover{
        text-decoration:none;
      }
      ul{
        box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.2);
      }
    }
    .--hasSubMenu{
      position:relative;
      &::before{
        content:"";
        display:block;
        width:0.6em;
        height:0.6em;
        border-right:0.2em solid #000;
        border-bottom:0.2em solid #000;
        transform:rotate(45deg);
        position:absolute;
        top:50%;
        right:0.8em;
        margin-top:-0.3em;
      }
    }
  }
  .globalNavi__menu__sub{
    width:100%;
    opacity: 0;  /*サブメニューは最初は非表示にしておく*/
    visibility: hidden;  /*サブメニューは最初は非表示にしておく*/
    position: absolute;
    top: 3.7em;
    left: 0;
    border-top: 1px solid #EEE;  /*ボーダートップを指定*/
    transition: all .2s ease;
    li{
      height:auto;
      padding: 0;  /*親メニューのパディングを解除*/
      margin:0;
      display:block;
      position: relative;
      >a,>span{
        border: 1px solid #EEE;  /*ボーダーの指定*/
        border-top: none;  /*ボーダートップは重なって太くなるので解除。一番上は ul 要素に指定*/
        padding: 0.8em 0;
        background: #FFF;
        text-decoration:none;
        text-align:center;
        display:block;
        font-size:0.9em;
        position: relative;
        &:hover{ 
          color:#000;
          background: #EEE;
        }
      }
      &:hover {
        >a,>span{
          color:#000;
          background: #EEE;
        }
        ul.globalNavi__menu__sub__sub {
          right: -90%;
          visibility:visible;
          opacity: 1;
          display: block;    /*マウスオーバー時にサブメニューを表示する*/
          z-index:1;
        }
      }
    }
  }
  .globalNavi__menu__sub__sub{
    width:100%;
    opacity: 0;  /*サブメニューは最初は非表示にしておく*/
    visibility: hidden;  /*サブメニューは最初は非表示にしておく*/
    position: absolute;
    top: 1em;
    right: -80%;
    transition: all .2s ease;
    border-top: 1px solid #EEE;  /*ボーダートップを指定*/
    background: #FFF;
    li{
      height:auto;
      padding: 0;  /*親メニューのパディングを解除*/
      margin:0;
      display:block;
      line-height:1.5em;
      >a,>span{
        border: 1px solid #EEE;  /*ボーダーの指定*/
        border-top: none;  /*ボーダートップは重なって太くなるので解除。一番上は ul 要素に指定*/
        padding: 0.8em 0;
        background: #FFF;
        text-decoration:none;
        text-align:center;
        display:block;
      }
    }
  }
}