JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<nav>
  <ul>
    <li><a href="#">Lien 1</a></li><!--
    --><li><a href="#">Lien 2</a></li><!--
    --><li><a href="#">Lien 3</a></li>
  </ul>
</nav>

CSS

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav{
  background-color: black;
}

ul{
  list-type: none;
   text-align: center;
   width: 200px;
   margin: 0 auto;
}

ul li{
  display: inline-block;
}

ul li a{
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px;
  transition: opacity .2s ease;
}

.hover{
  opacity: 0.5;
  transition: opacity .2s ease;
}

ul:hover a:not(:hover){
  opacity: 0.5;
}