JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Exemple pour la page /articles/animaux/</h3>
<div class="rub">
<ul>
    <li><a href="/articles/animaux/">Articles</a>
    <ul>
        <li><a href="/tout/animaux/">Toutes les publications</a></li>
      <li><a href="/articles/animaux/">Articles</a></li>
      <li><a href="/discussions/animaux/">Discussions</a></li>
      <li><a href="/evenements/animaux/">Evénements</a></li>
        <li><a href="/annonces/animaux/">Annonces</a></li>
    </ul>
  </li>
</ul>
</div>
<>
<div class="rub">
<ul>
  <li><a href="/articles/animaux/">Animaux</a>
    <ul>
        <li><a href="/articles/">Toutes les catégories</a></li>
        <li><a href="/articles/animaux/">Animaux</a></li>
      <li><a href="/articles/auto-moto/">Auto & moto</a></li>
      <li><a href="/articles/cinema/">Cinéma</a></li>
      <li><a href="/articles/informatique/">Informatique</a></li>      
    </ul>
  </li>
</ul>
</div>
<div class="content">
    Liste des publications correspondantes
</div>
<hr/>

<h3>Exemple pour la page /annonces/</h3>
<div class="rub">
<ul>
    <li><a href="/annonces/">Annonces</a>
    <ul>
        <li><a href="/tout/">Toutes les publications</a></li>
      <li><a href="/articles/">Articles</a></li>
      <li><a href="/discussions/">Discussions</a></li>
      <li><a href="/evenements/">Evénements</a></li>
        <li><a href="/annonces/">Annonces</a></li>
    </ul>
  </li>
</ul>
</div>
<>
<div class="rub">
<ul>
  <li><a href="/annonces/">Toutes les catégories</a>
    <ul>
        <li><a href="/annonces/">Toutes les catégories</a></li>
        <li><a href="/annonces/animaux/">Animaux</a></li>
      <li><a href="/annonces/auto-moto/">Auto & moto</a></li>
      <li><a href="/annonces/cinema/">Cinéma</a></li>
      <li><a href="/annonces/informatique/">Informatique</a></li>      
    </ul>
  </li>
</ul>
</div>
<div class="content">
    Liste des publications correspondantes
</div>
<hr/>


<h3>Exemple pour la page /tout/cinema/</h3>
<div class="rub">
<ul>
    <li><a...

CSS

.content {padding:10px; background:#EDEDED;margin:10px 0 10px;}
.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;}