<nav class="globalNavi--type002">
  <ul class="globalNavi__menu__main">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">メニュー名</a></li>
    <li><a href="#"><span class="--hasSubMenu">サブメニューを<br/>持つメニュー</span></a>
      <div class="globalNavi__menu__sub">
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#" class="--hasSubMenu">サブメニューを<br/>持つメニュー</a>
          <div class="globalNavi__menu__sub__sub">
            <div class="globalNavi__menu__sub__inner">
              <p><strong>メニュー名の見出し</strong></p>
              <p>
                メニューの簡単な説明文が入ります。
                テキストテキストテキストテキストテキストテキスト<br/>
                テキストテキストテキストテキストテキストテキストテキストテキスト<br/>
                テキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <ul>
                <li><a href="#">サブメニュー</a></li>
                <li><a href="#">サブメニュー</a></li>
                <li><a href="#">サブメニュー</a></li>
              </ul>
            <!-- /.globalNavi__menu__sub__inner --></div> 
          <!-- /.globalNavi__menu__sub__sub --></div> 
        </li>
      <!-- /.globalNavi__menu__sub --></div> 
    </li>
    <li><a href="#">メニュー名</a></li>
    <li><a href="#">メニュー名</a></li>
  </ul>
<!-- /.globalNavi --></nav>
                

.globalNavi--type002{
  display:block;
  .globalNavi__menu__main{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    >li {
      display:block;
      z-index: 2; /*ドロップダウンしたメニューが隠れないように*/
      &:hover{
        >a .--hasSubMenu::after, >span .--hasSubMenu::after {	/*ホバー吹出の装飾△*/
          visibility: visible;
          opacity: 1;
          bottom:-0.3em;
        }
        .globalNavi__menu__sub {
          width:100%;
          top: 3.5em;
          visibility:visible;
          opacity: 1;
          display: block;    /*マウスオーバー時にサブメニューを表示する*/
        }
      }
      >a,>span {
        display:inline-block;
        position:relative;
        padding:1em 1.5em;
        .--hasSubMenu{
          &::after{	/*ホバー吹出の装飾△*/
            position: absolute;
            content: "\0025B2";
            font-size:0.8em;
            bottom:-1em;
            left:50%;
            margin-left:-0.4em;
            color:#CCC;
            visibility: hidden;
            opacity: 0;
            transition: all .1s ease;
          }
        }
      }
      &:last-child>a::after,&:last-child>span::after,&>a::before,&>span::before{
        content:" ";
        width:1px;
        height:2em;
        background:#CCC;
        display:block;
        position:absolute;
        top:50%;
        margin-top:-1em;
        left:0;
      }
      &:last-child>a::after,&:last-child>span::after{
        left:unset;
        right:0;
      }
    }
    li {
      a,span {
        text-decoration:none;
        display:block;
      }
      a:hover,span:hover{
        text-decoration:none;
      }
    }
  }
  .globalNavi__menu__sub{
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
    opacity: 0;  /*サブメニューは最初は非表示にしておく*/
    visibility: hidden;  /*サブメニューは最初は非表示にしておく*/
    position: absolute;
    top: 3.7em;
    left: 0;
    margin-left: 0;
    transition: all .2s ease;
    &::before{
      content:" ";
      width:100vw;;
      height:100%;
      background:#CCC;
      display:block;
      position:absolute;
      top:0;
      left:50%;
      margin-left:-50vw;
      z-index:-1;
    }
    p{
      margin-bottom:1em;
      strong{
        font-size:1.2em;
      }
    }
    ul{
      width:100%;
      display:flex;
      flex-wrap:wrap;
      gap:0 1em;
      li{
        a{
          padding:0.4em 1em;
          background:#FFF;
          display:inline-block;
          border-radius:0.2em;
        }
      }
    }
  }
  .globalNavi__menu__sub__inner{
    display:block;
    padding:3em 20%;
  }
}