<ul>
<li><a href="#">nav</a></li>
<li><a href="#">nav</a></li>
<li><a href="#">nav</a></li>
<li><a href="#">nav</a></li>
<li><a href="#">nav</a></li>
</ul>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
ul {
display: flex;
margin: 0;
padding: 0;
border: 1px solid #ccc;
border-radius: 4px;
list-style: none;
}
ul li {
width: 20%;
}
ul li:not(:first-child) {
border-left: 1px solid #ccc;
}
ul li a {
display: block;
padding: 1em 3.5em;
color: #333;
font: 400 18px/1 'Open Sans', sans-serif;
text-decoration: none;
text-align: center;
transition: .3s;
}
ul:hover li a {
opacity: .3;
}
ul li a:hover {
opacity: 1;
}
This Pen doesn't use any external JavaScript resources.