JSFiddle - React, Tailwind, and code Playground
by sijav
HTML
<ul id="menu">
<li><a class="upFont" href="#">Menu 1</a>
<ul>
<div>
<li><a class="subFont" href="#">Level 1.1</a></li>
<li><a class="subFont" href="#">Level 1.2</a></li>
</div>
</ul>
</li>
<li><a class="upFont" href="#">Menu 2</a>
<ul>
<div>
<li class="sub"><a class="subFont" href="#">Level 2.1</a>
<ul>
<div>
<li><a class="subFont" href="#">Level 2.1.1</a></li>
<li><a class="subFont" href="#">Level 2.1.2</a></li>
</div>
</ul>
</li>
<li class="sub"><a class="subFont" href="#">Level 2.2</a>
<ul>
<div>
<li><a class="subFont" href="#">Level 2.2.1</a></li>
<li><a class="subFont" href="#">Level 2.2.2</a></li>
<li><a class="subFont" href="#">Level 2.2.3</a></li>
<li><a class="subFont" href="#">Level 2.2.4</a></li>
</div>
</ul>
</li>
<li><a class="subFont" href="#">Level 2.3</a></li>
<li><a class="subFont" href="#">Level 2.4</a></li>
<li class="sub"><a class="subFont" href="#">Level 2.5</a>
<ul>
<div>
<li><a class="subFont" href="#">Level 2.5.1</a></li>
<li><a class="subFont" href="#">Level 2.5.2</a></li>
<li><a class="subFont" href="#">Level 2.5.3</a></li>
<li><a class="subFont" href="#">Level 2.5.4</a></li>
<li><a class="subFont" href="#">Level 2.5.5</a></li>
<li><a class="subFont" href="#">Level...CSS
/*********FOR RTL USE THIS********/
#menu {
direction:ltr;
text-align:right;
}
#menu a{
display: block;
text-decoration:none;
color:black;
}
#menu a.upFont {
direction:rtl;
display:block;
color: #FEFFFF;
text-decoration:none;
font-family: "broya";
margin-top:-3px;
font-size: 15px;
width:100%;
cursor: default;
text-align: center;
}
#menu > li, #menu div{
-moz-box-shadow: 0 0 10px #99ccff;
-webkit-box-shadow: 0 0 10px #99ccff;
box-shadow: 0 0 10px #99ccff;
}
#menu > li, #menu > li li {
transition: background 300ms;
position: relative;
display:inline-block;
margin:0px;
min-width: 110px;
padding: 6px 6px;
background-color: #4878A8;
background-image: linear-gradient(#6898C8, #4878A8 50%, #386898 50%, #5888B8);
}
#menu > li{
height: 20px;
}
#menu li.sub > a:after{
content: '>';
float: left;
}
#menu > li li {
background: transparent none;
font-size: 11px;
height: initial;
}
#menu > li li.sub {
white-space:normal;
}
#menu a.subFont {
color: #436C94;
font-family: "broya";
font-size: 11px;
width:100%;
}
#menu > li li:hover {
background:#D3ECF6;
}
#menu > li:first-child {
border-right: 1px solid #769FC7;
border-radius: 8px 0 0 8px;
}
#menu > li + li {
margin-left: -4px;
border-left: 1px solid #A9CFFA;
border-right: 1px solid #769FC7;
}
#menu > li:last-child {
margin-right: 0px;
border-right:0;
border-left: 1px solid #A9CFFA;
border-radius: 0 8px 8px 0;
}
#menu > li:hover {
background-color: #98BFE9;
background-image: linear-gradient(#88B8E8, #6898C8 50%, #5888B8 50%, #78A8D8);
z-index: 10000;
}
#menu ul {
-webkit-transition: 0s 1.5s;
-moz-transition: 0s 1.5s;
-o-transition: 0s 1.5s;
transition: 0s 1.5s;
visibility:hidden;
position: absolute;
top: 32px;
right:-5px;
margin:0;
padding:0px 5px 5px 5px;
overflow:hidden;
border-radius: 0 0 8px 8px;
}
#menu ul ul {
top: 0px;
right:100%;
padding: 0px 1px 5px 5px;
}
#menu ul
{
cursor:pointer;
}
#menu div...JavaScript
$("#menu li li.sub").hover(function () { $(this).parent().parent('ul').css("overflow", "visible"); }, function () { $(this).parent().parent('ul').css("overflow", "hidden"); });
$("#menu li li.sub").click(function () { setTimeout(function () { $(this).mouseenter(); }, 10); });