JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
      <li>Lien 1</li>
      <li>Lien 2</li>
      <li>Lien 3</li>
      <li>Lien 4</li>
      <li>Lien 5</li>
      <li>Lien 6</li>
      <li>Lien 7</li>
      <li>Lien 8</li>
  </ul>
</nav>
<section>
    <img src="" alt=""/>
</section>

CSS

nav{
    width:25%;
    display:inline-block;
}

nav ul {
    list-style:none;
    margin-left:0px;
}

nav ul li {
    background:red;
    border:black 1px solid;
    padding:8px 0;
    margin-bottom:15px;
    width:60%;
    transition:all .4s;
}

nav ul li:hover {
    transition:all .4s;
    width:100%;
    padding:12px 0;
}

nav ul li:hover + li{
    transition:all .4s;
    width:80%;
    padding:10px 0;
}

section {
    width:74%;
    display:inline-block;
}