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

.contentNavi--type003{
  display:block;
  >ul{
    width:100%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    position:relative;
    z-index: 1;
    border-top:#000 solid 1px;
    border-left:#000 solid 1px;
    >li{
      width:50%;
      border-right:#000 solid 1px;
      border-bottom:#000 solid 1px;
      a{
        display:block;
        position:relative;
        color:#000;
        padding:1em 2em 1em 1em;
        line-height:1.5;
        &::before{
          content:"";
          display:block;
          width:0.6em;
          aspect-ratio: 1/cos(30deg);
          clip-path: polygon(50% 100%,100% 0,0 0);
          background:#AAA;
          position:absolute;
          top:calc(50% - 0.3em);
          right:1em;
          transition:top 0.3s ease;
        }
        &:hover{
          background:#DDD;
          color:#000;
          &::before{
            top:50%;
          }
        }
      }
    }
  }
}
@media print, screen and (min-width: 768px) {
  .contentNavi--type003>ul{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    li a{
      padding:1.5em 2.5em 1.5em 1.5em;
    }
  }
}