JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="menu">
<li><a href="">Home</a></li>
<li>
<a href="#">My Company</a>
<ul>
<li>
<a href="">About Me</a>
</li>
<li>
<a href="">New Menu</a>
</li>
<li>
<a href="">Board of Trustees</a>
</li>
<li>
<a href="#">Core Services</a>
<ul>
<li><a href="">Membership</a></li>
<li><a href="">Investments</a></li>
<li><a href="">Benefits</a></li>
<li><a href="">Students Loan</a></li>
</ul>
</li>
<li>
<a href="">Executive Committee</a>
</li>
<li>
<a href="">Mission and Vision</a>
</li>
</ul>
</li>
<li><a href="">Statistics</a></li>
<li><a href="">News</a></li>
<li><a href="">Resources</a></li>
<li>
<a href="#">Self Services</a>
<ul>
<li>
<a href="#">Benefit Application</a>
</li>
<li>
<a href="#">Employer Enrolment</a>
</li>
<li>
<a href="#">Member Enrolment</a>
</li>
</ul>
</li>
<li><a href="">FAQs</a></li>
<li>
<a href="#">Contact Us</a>
<ul>
<li>
<a href="">Contact Information</a>
</li>
<li>
<a href="">Customer Ser Loc</a>
</li>
<li>
<a href="">Telephone Directory</a>
</li>
<li>
<a href="">My Menu Locations Map</a>
</li>
</ul>
</li>
<li><a href="http://www.google.com/">Apps</a></li>
<li><a href="http://www.google.com/">Enquiries</a></li>
</ul>
CSS
#menu {
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#DCDCDC, #DCDCDC);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #DCDCDC));
background: -webkit-linear-gradient(#DCDCDC, #DCDCDC);
background: -o-linear-gradient(#DCDCDC, #DCDCDC);
background: -ms-linear-gradient(#DCDCDC, #DCDCDC);
background: linear-gradient(#DCDCDC,#DCDCDC);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #DCDCDC;
-webkit-box-shadow: 0 2px 1px #DCDCDC;
box-shadow: 0 2px 1px #DCDCDC;
}
#menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a {
float: left;
height: 25px;
padding: 0 10px;
color: #999;
text-transform: uppercase;
font: bold 11px/25px Arial, Hengou; /*syed*/
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
#menu li:hover > ul {
}
/* Sub Menu */
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#DCDCDC,#DCDCDC);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1,#DCDCDC));
background: -webkit-linear-gradient(#DCDCDC,#DCDCDC);
background: -o-linear-gradient(#DCDCDC, #DCDCDC);
background: -ms-linear-gradient(#DCDCDC, #DCDCDC);
background: linear-gradient(#DCDCDC, #DCDCDC);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px...
JavaScript
$("#menu li").mouseover(function () {
// $(this).children("ul").delay(3000).fadeIn();
$(this).children("ul").fadeIn();
},
function () {
$(this).children("ul").fadeOut();
});