JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="R0"><a href="#">Rubrique 0</a></li>
    <li id="R1">
        <a href="#">Rubrique 1</a>
        <ul>
            <li><a href="#">Lien 1</a></li>
            <li><a href="#">Lien 2</a></li>
        </ul>
    </li>
    <li id="R2"><a href="#">Rubrique 2</a></li>
    <li id="cache0">Texte cacher 0 </li>
    <li id="cache1">Texte cacher 1 </li>
    <li id="cache2">Texte cacher 2 </li>
</ul>

CSS

ul li ul li{
    display:none;
}

ul li:hover ul li{
    display:block;
}

#cache0 , #cache1, #cache2{
    display:none;
}

#R0:hover ~ #cache0{
  display:block;  
}
#R1:hover ~ #cache1{
  display:block;  
}
#R2:hover ~ #cache2{
  display:block;  
}