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

.contentNavi--type007{
  display:block;
  >ul{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0 1em;
    position:relative;
    z-index: 1;
    >li{
      margin-bottom:1.6em;
      display:block;
      a{
        display:block;
        position:relative;
        color:#FFF;
        padding:0.5em 1em 0.5em 1em;
        line-height:1.5;
        background:#666;
        border-bottom:none;
        &::before{
          content:"";
          display:block;
          width:1.6em;
          height:1em;
          aspect-ratio: 2;
          clip-path: polygon(50% 100%,100% 0,0 0);
          background:#666;
          position:absolute;
          bottom:-0.8em;
          left:50%;
          margin-left:-0.8em;
          transition:bottom 0.3s ease;
          z-index: -1;
        }
        &:hover{
          color:#DDD;
          &::before{
            bottom:-1em;
          }
        }
      }
    }
  }
}