JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.designchemical.com/lab/jquery/demo/js/jquery.cookie.js"></script>
<ul id="cssmenu">
<li><a href="#">Setup</a></li>
<li class="active"><a href="#">Online Booking</a>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Suppliers</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">Email & Fax Marekting</a></li>
</ul>
</li>
<li><a href="#">Company</a>
<ul>
<li><a href="#">Your Account</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
CSS
ul{list-style: none; padding: 0; margin: 0;}
#cssmenu {float: left; width: 100%; margin: 0; text-decoration:none;}
#cssmenu li ul {display: none;}
#cssmenu li ul li a {padding: 15px 15px; background: #e8e8e8; color: #666666; border-bottom: 1px dotted #ccc;}
#cssmenu a {
line-height: 1.3;
text-transform: uppercase;
text-decoration:none;
}
#cssmenu li > a {
font-size: 15px;
display: block;
background: url(menu_images/pattern.png) top left repeat;
color: #ffffff;
border-top: none;
}
#cssmenu li {
background: #FF722A;
}
#cssmenu li a.active {background: #e36525; color: #fff;}
#cssmenu li:hover {
background: #e36525;
}
#cssmenu li > a {
display: block;
padding: 15px 15px;
}
#cssmenu li ul li a:hover {
background: pink;
}
#cssmenu li ul li a:active { background-color: blue; }
JavaScript
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#cssmenu > li > a:eq('+checkCookie+')').addClass('active').next().show();
}
$('#cssmenu > li > ul > li > a').click(function(){
var checkElement = $(this).next();
$(this).removeClass('testing');
$(this).closest('li').addClass('testing');
});
$('#cssmenu > li > a').click(function(){
var navIndex = $('#cssmenu > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#cssmenu li ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#cssmenu li a').removeClass('active');
$(this).addClass('active');
});