<nav class="globalNavi--type001">
  <ul class="globalNavi__menu__main">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">メニュー名</a></li>
    <li><a href="#"><span class="--hasSubMenu">サブメニューを<br/>持つメニュー</span></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--type003{
  display:block;
  position:relative;
  z-index: 997;
  .globalNavi__menu__main{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0;
    position:relative;
    &::before{
      content:"";
      display:block;
      width:100vw;
      height: calc(100% - 1px);
      background: linear-gradient(to bottom, #EEE 50%,#DDD 100%);
      position:absolute;
      top:0;
      left:50%;
      margin-left:-50vw;
      z-index: -1;
    }
    >li {
      width:20%;
      min-height:4.5em;
      text-align:center;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      position: relative; /*z-indexの指定や子要素の基準とするために指定*/
      z-index: 2; /*ドロップダウンしたメニューが隠れないように*/
      &::before,&:last-child::after{
        content:" ";
        width:2px;
        height:100%;
        display:block;
        position:absolute;
        top:0;
        background: linear-gradient(to right, #FFF 1px, #BBB 1px);
      }
      &:hover>a,&:hover>span{
        background: linear-gradient(to bottom, #DDD 20%, #EEE 100%);
      }
      &::before{
        left:-1px;
      }
      &:last-child::after{
        right:-1px;
      }
      &:hover ul.globalNavi__menu__sub {
        width:calc(100% - 2px);
        top: 3.9em;
        visibility:visible;
        opacity: 1;
        display: block;    /*マウスオーバー時にサブメニューを表示する*/
      }
      a,span{
      }
      >a,>span {
        width:100%;
        height:100%;
        min-height:4.5em;
        padding:0.8em 1.5em;
        text-align:center;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-wrap:wrap;
        position:static;
      }
    }
    li {
      a,span {
        color:#000;
        text-decoration:none;
        line-height:1.5em;
        position:relative;
      }
      a:hover{
        text-decoration:none;
      }
      ul{
        box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.2);
      }
    }
    .--hasSubMenu{
      position:static;
      &::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{
        color:#FFF;
        border: 1px solid #666;  /*ボーダーの指定*/
        border-top: none;  /*ボーダートップは重なって太くなるので解除。一番上は ul 要素に指定*/
        padding: 0.8em 0;
        background: linear-gradient(30deg, #444 0, #666 100%);
        background: #444;
        text-decoration:none;
        text-align:center;
        display:block;
        font-size:0.9em;
        position: relative;
        &:hover{ 
          color:#000;
          background: #EEE;
        }
      }
      &:hover{
        >a,>span{
          color:#FFF;
          background: #000;
        }
        ul.globalNavi__menu__sub__sub {
          right: -90%;
          visibility:visible;
          opacity: 1;
          display: block;    /*マウスオーバー時にサブメニューを表示する*/
          z-index:1;
        }
      }
      .--hasSubMenu{
        &::before{
          border-color:#FFF;
        }
      }
    }
  }
  .globalNavi__menu__sub__sub{
    width:100%;
    opacity: 0;  /*サブメニューは最初は非表示にしておく*/
    visibility: hidden;  /*サブメニューは最初は非表示にしておく*/
    position: absolute;
    top: 1em;
    right: -80%;
    transition: all .2s ease;
    border-top: 1px solid #666;  /*ボーダートップを指定*/
    background: #FFF;
  }
}