JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rub">
<ul>
  <li><a href="/rubrique-selectionnee/"><h1>Rubrique sélectionnée</h1></a>
    <ul>
      <li><a href="/autre-rubrique/">Autre rubrique</a></li>
      <li><a href="/autre-rubrique/">Autre rubrique</a></li>
      <li><a href="/autre-rubrique/">Autre rubrique</a></li>
    </ul>
  </li>
</ul>
</div>
<>
<div class="rub">
<ul>
  <li><a href="/cat-selectionnee/"><h2>Catégorie sélectionnée</h2></a>
    <ul>
      <li><a href="/autre-cat/">Autre cat</a></li>
      <li><a href="/autre-cat/">Autre cat</a></li>
      <li><a href="/autre-cat/">Autre cat</a></li>
      <li><a href="/autre-cat/">Autre cat</a></li>
    </ul>
  </li>
</ul>
</div>

CSS

h1, h2 {font-size:12px;margin:0;padding:0;}
.rub {display:inline-block;background:#EDEDED;border:1px solid #CCC;}
.rub ul, .rub li {list-style-type:none;margin:0;padding:0;font-size:12px;}
.rub li {display:inline-block;margin:0px;} 
.rub li a {display:block;padding:10px;margin:0;color:#555;text-decoration:none;} 
.rub li a:hover {background:#999;color:#FFF;}
.rub ul li a.active {background:#555;color:#FFF;}
.rub ul li ul {display:none;position:absolute;background:#EDEDED;z-index:1000;border:1px solid #CCC;}
.rub ul li:hover ul {display:block;}
.rub ul li ul li {display:block;}
.rub ul li ul li a {padding:2px 10px 2px 10px;white-space:nowrap;}