<nav class="contentNavi--type001">
  <ul>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
  </ul>
</nav>
              

.contentNavi--type001{
  display:block;
  >ul{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0 1em;
    position:relative;
    z-index: 1;
    padding:0.5em 0;
    &::before{
      content:"";
      display:block;
      width:100vw;
      height:100%;
      background:#EEE;
      position:absolute;
      top:0;
      left:50%;
      margin-left:-50vw;
      z-index: -1;
    }
    >li{
      a{
        display:block;
        position:relative;
        color:#000;
        padding:0.5em 1em 0.5em 1.5em;
        line-height:1.5;
        &::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:calc(50% - 0.2em);
          left:0;
          transition:top 0.3s ease;
        }
        &:hover{
          color:#666;
          &::before{
            top:50%;
          }
        }
      }
    }
  }
}