JSFiddle - React, Tailwind, and code Playground
HTML
<div class="MENU" unselectable="on" style="background-color:rgb(181, 230, 29);width:216px;height:auto;position:relative;top:auto;right:auto;z-index:inherit;bottom:auto">
<a id="bt4" unselectable="on" style="clip:rect(200px, auto, auto, auto)">
<h3>Experimentation</h3></a>
<div unselectable="on" id="bloc4" class="bloc">
<ul id="menu-vertical">
<li><a href="#">Programme</a></li>
<li class="dropdown-submenu"><a href="#">
Protocoles<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a>Carotte</a></li>
<li><a>Laitue</a></li>
<li><a>Chou-fleur</a></li>
<li><a>Chicorée</a></li>
<li><a>Bettewrave</a></li>
<li><a>Haricots</a></li>
<li><a>Multi-espèces</a></li>
<li><a>Autres</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="#">
Compte rendu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a>Carotte</a></li>
<li><a>Laitue</a></li>
<li><a>Chou-fleur</a></li>
<li><a>Chicorée</a></li>
<li><a>Betterave</a></li>
<li><a>Haricots</a></li>
<li><a>Multi-espèces</a></li>
<li><a>Autres</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="#">
Historique et bases de données<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#">
Réunion expe<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a>Vilmorin</a></li>
<li><a>FNAMS</a></li>
<li><a>Projets
multi-partenaires</a></li>
</ul>
</li>
<li><a>Historique</a></li>
<li><a>Bases de...
CSS
.MENU a, .item_list a
{
color:#0066FF
}
body li /*:nth-child(odd)*/
{
margin-bottom:3px;
}
.ms-dlgContent
{
overflow:scroll;
}
.MENU:after {
content: "";
display: inline;
height: 0px;
clear: both;
}
#banniere_site
{
width: 100%;
margin-left: 5px;
border-radius:25px;
}
.ms-dlgFrame
{
overflow:hidden;
}
.MENU
{
border-radius: 15px;
border: 2px groove #0C0;
}
#item_list_1 a:hover, #item_list_2 a:hover {
padding-left:10px;
text-decoration:none;
font-size: 125%;
}
#item_list_1:hover, #item_list_2:hover
{
box-shadow: 0px 0px 20px #65ff65;
}
.MENU ul:first-child {
width: 195px;
}
.caret {
display: inline;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
position:relative;
right:0px;
top:6px;
float:right;
}
#prez-title span.caret
{
float: none;
top: 10px;
left: 3px;
}
#item_list_1
{
width:226px;
position:relative;
border:medium outset #00FF00;
background-color:#66FF66;
height:auto;
right:auto;
bottom:auto;
left:25px;
}
#item_list_1 ul
{
list-style:none;left:-30px;
}
#item_list_2
{
width:226px;
position:relative;
top:20%;
left:25px;
border:medium outset #00FF00;
background-color:#66FF66;
height:auto;
right:auto;
bottom:auto
}
#item_list_2 ul
{
list-style:none;left:-30px;
}
.bloc
{
padding:8px;
border-style:none;
background-color:rgb(204, 255, 102);
color:#0066FF;
position:relative;
display:block;
height:auto;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
left:0px;top:0px
}
#bloc5, #bloc6
{
display:none;
}
.MENU:hover
{
box-shadow: 0px 0px 20px #b5e51d;
}
.MENU img
{
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.dropdown-menu {
transition: 0.5s ease-in-out;
-webtkit-transition:2s ease-in-out;
opacity:1;
-moz-transition: 1s opacity...
JavaScript
/*
$('#menu-vertical').each(function(){
$("a").attr("href") = "http://www.google.com";
});
*/
$(".dropdown-menu").hide();
$(".dropdown-submenu").css("border", "1px solid red");
$('.dropdown-submenu').on('click', function(){
//alert('clicked');
$(this).find(".dropdown-menu:first").toggle();
});