<div class="container mt-5">
  <div class="top_line"></div>
  <ul class="top_menu">
    <li><a href="#">
      <div class="arrow">🡇</div>
      Пункт меню</a></li>
     <li><a href="#">
       <div class="arrow">🡇</div>
       Пункт меню</a></li>
     <li><a href="#">
       <div class="arrow">🡇</div>
       Пункт меню</a></li>
     <li><a href="#">
       <div class="arrow">🡇</div>
       Пункт меню</a></li>
     <li><a href="#">
       <div class="arrow">🡇</div>
       Пункт меню</a></li>
     <li><a href="#">
       <div class="arrow">🡇</div>
       Пункт меню</a></li>
     <li><a href="#">
       <div class="arrow">🡇</div>
       Пункт меню</a></li>
     <li><a href="#">
       <div class="arrow">🡇</div>
       Пункт меню</a></li>
   </ul> 
  </div>

body {
  background: #000;
}
.top_menu {display:flex;list-style-type:none;
    width: 100%;
      margin-top: -11px;
    justify-content: space-between;
    background: linear-gradient(to right, #ff345a 0%, #ffd100 38%, #008fc2 64%, #00e9ce 100%);
    background-clip:text;
  -webkit-background-clip:text;
}
.top_menu li{}
.top_menu li a:hover{color:transparent;}

.top_menu li a {
  transition:500ms;
  color:white;
}
.top_menu li a:hover .arrow {
  opacity:1;
}

.top_line {
  position: relative;
     height: 7px;
    width: 100%;
    background-image: linear-gradient(to right, #ff345a 0%, #ffd100 38%, #008fc2 64%, #00e9ce 100%); 
  
  }
.arrow {
  text-align:center;
  opacity:0;
}