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><a href="#">Online Booking</a>
<ul>
<li><a href="#">Company</a>
<ul>
<li><a href="#">Your Account</a></li>
<li><a href="#">Contact</a></li>
</ul>
</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: #ccc;
}
#cssmenu li ul li a.active { background-color: #ccc; }
#cssmenu li.has-sub > a {
background: url(http://i.imgur.com/247SASS.png) 96% center no-repeat;
}
#cssmenu li.has-sub > a.active {
background: url(http://i.imgur.com/SygGufx.png) 96% center no-repeat;
background-color: #e36525;
}
JavaScript
$('#cssmenu > li:has(ul)').addClass("has-sub");
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#cssmenu > li > a:eq(' + checkCookie + ')').addClass('active').next().show();
}
checkCookie = $.cookie("sub_nav-item");
if (checkCookie != "") {
$('#cssmenu > li > ul > li > a:eq(' + checkCookie + ')').addClass('active').next().show();
}
$('#cssmenu > li > ul > li > a').click(function () {
var navIndex = $('#cssmenu > li > ul > li > a').index(this);
$.cookie("sub_nav-item", navIndex);
var checkElement = $(this).next();
$(this).removeClass('testing');
$(this).closest('li').addClass('testing');
$('#cssmenu li li .active').removeClass('active');
$(this).addClass('active');
});
$('#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');
});