JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="top_navigation">
    <ul>
        <li><a href="#"> Saisie assistée (schémas prédéfinis) </a></li>
        <li> <a href="#">Saisie libre </a></li>
        <li> <a href="#">Extourne ou annulation écriture </a>
            <ul ">
                <li> <a href="#">Annulation écriture jour validé</a></li>
                <li> <a href="#">Extourne écriture antérieure </a></li>
            </ul>
        </li>
        <li> <a href="#">Consultations/Editions </a>
            <ul >
                <li> <a href="#">Lots à valider</a></li>
                <li> <a href="#">Lots antérieurs comptabilisés </a></li>
                <li> <a href="#">Listes des schémas habilités </a></li>
                <li> <a href="#">Listes des comptes habilités </a></li>
            </ul>
        </li>
        <li> <a href="#">Paramètrage/Administration </a>
            <ul >
                <li> <a href="#">Entités habilitées</a></li>
                <li> <a href="#">Collaborateurs habilités </a></li>
                <li> <a href="#">Habilitations Entité / Comptes </a></li>
                <li> <a href="#">Habilitations Entité / Schémas </a></li>
                <li> <a href="#">Paramétrages Schémas </a></li>
                <li> <a href="#">Import et Export Excel </a></li>
            </ul>
        </li>

    </ul>
</nav>

CSS

nav {
       width:300px;
}

nav ul {
       list-style:none;
       margin:0;
       padding:0;

}

nav ul li {

       position:relative;
       background-color: #d23070;
       border: 1px solid;
       border-top-right-radius: 0.5em;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
       margin-bottom: 5px;
    
}

nav ul li:hover,
nav ul li:FOCUS {
       position:relative;
       background-color: #3968ab;
       border: 1px solid;
       border-top-right-radius: 0.5em;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
       margin-bottom: 5px;
    diplay:table;
}

nav a {
       color:#e8e8e8;
       padding:12px 0px;
       display:block;
       text-decoration:none;
       font-family:tahoma;
       font-size:13px;
       text-transform:uppercase;
       padding-left:20px;
}

nav a:HOVER,
nav a:FOCUS {
       background-color:#3968ab; 
       color:#ffffff;
       border-top-right-radius: 0.5em;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
}

nav ul li ul{
       background-color:#3968ab; 
       color:blanc;
       border: 1px solid;
       border-top-right-radius: 0.5em;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
}

nav a:focus ~ ul{
       display:block;
       border: 1px solid;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
       background:#f1f1f1;
       padding-top: 10px;
}

nav ul li ul:hover {
       display:block;
       border: 1px solid;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
       background:#f1f1f1;
       padding-top: 10px;
}

nav ul ul {
       position:relative;
       left:0px;
      ...

JavaScript

$(document).ready(function () {
	var $nav = $('#top_navigation > ul > li');
	$nav.focus(
		function() {
			$('ul', this).stop(true, true).slideDown('fast');
		},
		function() {
			$('ul', this).slideUp('fast');
		}
	);
});