JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="hmenu">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Agenda</a></li>
    <li id="cat"><a href="#" id="toggle-cat-list" title="Cliquer pour dérouler les catégories">Catégories</a>
        <ul id="cat-list-menu">
            <li><a href="#">Catégorie 01</a></li>
            <li><a href="#">Catégorie 02</a></li>
            <li><a href="#">Catégorie 03</a></li>
            <li><a href="#">Catégorie 04</a></li>
            <li><a href="#">Catégorie 05</a></li>
        </ul>
    </li>
</ul>

CSS

#hmenu {
    background: #b61318;
	box-shadow: 0 1px 3px #a9a9a9;
}

#hmenu, #cat-list-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

#hmenu > li {
	display: inline;
	position: relative;
	margin: 0;
	padding: 0;
}

#hmenu > li > a {
	font-size: 2em;
	display: inline-block;
	line-height: 90px;
	margin: 0;
	padding: 0 1%;
	text-decoration: none;
	color: #FFF;
}

#hmenu > li > a:hover,
#hmenu > li > a:focus,
#hmenu > li.current-menu-item > a,
#hmenu > li.current-menu-ancestor > a,
#cat-list-menu a:hover,
#cat-list-menu a:focus {
	transition: all 0.7s ease-out;
	color: #fff;
	background: #ad1216;
	text-shadow: -1px 1px 1px #000;
}

/* Categories menu */
#cat-list-menu {
    position: absolute;
    right: 1%;
    top: 45px;
    width: 230px;
    z-index: 10;
    background: rgb(182, 19, 24);
    background: rgba(182, 19, 24, .9);
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;            
    box-shadow: 0 1px 3px #000;
}

#cat-list-menu a {
	font-size: 1.5em;
	display: block;
	padding: 1% 2%;
	text-decoration: none;
	color: #FFF;
}

JavaScript

jQuery(document).ready(function() {
    // On masque la liste des catégories
    jQuery("#cat-list-menu").hide();
    // Comportement lors du clic sur "Catégories"
    jQuery("#toggle-cat-list").on("click", function(e) {
        e.preventDefault();
        if (jQuery("#cat-list-menu").css( "display" ) == "none") {
            jQuery("#cat-list-menu").slideDown(600);
            jQuery("#toggle-cat-list").attr("title", "Cliquer pour fermer la liste des catégories");
        }
        else {
            jQuery("#cat-list-menu").slideUp(600);
            jQuery("#toggle-cat-list").attr("title", "Cliquer pour dérouler la liste des catégories");
        }
    })
})