<div class="menu_outer">
<ul class="menu">
  <li><a href="1212">Item</a></li>
  <li><a href="1212">Item</a></li>
  <li><a href="1212">Item</a></li>
  <li><a href="1212">Item longer</a></li>
  <li><a href="1212">Item</a></li>
  <li><a href="1212">Item</a></li>
  <li><a href="1212">Item</a></li>
</ul>
</div>
.menu_outer{
  border: 1px solid #a9bdcd;
  padding: 8px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 36px
}

a{
  color: #fff;
  font-family: sans-serif;
}
*{
  margin: 0;
  padding: 0;
}
.menu{
  display: flex;
  flex-direction:row;
  list-style:none;
  width: 100%;
  border-radius: 52px;
  background: linear-gradient(180deg, #2071AD 0%, #408CC6 47.4%, #4681AE 100%);
  overflow: hidden;
}

li{
  text-transform: uppercase;
  font-weight: bold;
  font-size: 24px;
  line-height: 1;
  flex-grow:1;
  position: relative;
}

li:not(:first-child)::before{
  display: block;
  position: absolute;
  left: 0;
  content:"";
  border-left: 1px solid #6caad9;
  top: 15%;
  bottom: 15%;
  left:0
}

a{
  display: block;
  text-align: center;
  height: 52px;
  line-height: 52px;
  text-decoration: none;
}

a:hover{
  background: #6caad9;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.