JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="R0"><a href="#">Rubrique 0</a>
        <ul>
             <li id="cache0">Texte cacher 0 </li>
        </ul>
    </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>
        <ul>
             <li id="cache1">Texte cacher 1 </li>
        </ul>
    </li>
    <li id="R2"><a href="#">Rubrique 2</a>
        <ul>
             <li id="cache2">Texte cacher 2 </li>
        </ul>
    </li>
</ul>

CSS

ul li ul li{
    display:none;
}

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

#cache0 , #cache1, #cache2{
    display:none;
    position:absolute;
    top:150px;
    left:50px;
}

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

#R1 ul:hover ~ ul #cache1{
    display:none;
}