JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div id="cssmenu">
	<ul>
		<li><a href="#"><span>Setup</span></a></li>
		<li><a href="#"><span>Online Booking</span></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="#"><span>Company</span></a>
			<ul>
				<li><a href="#">Your Account</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</li>
		<li><a href="#"><span>Contact</span></a></li>
	</ul>
</div>

CSS

/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	font-weight: normal;
	text-decoration: none;
	line-height: 1;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	position: relative;
    
}
#cssmenu a {
	line-height: 1.3;
    text-transform: uppercase;
}
#cssmenu {
	width: 250px;
	

}


#cssmenu > ul > li {
	background: #11a3de;
	border-bottom: 1px solid #5ec0e7;
}
#cssmenu > ul > li:hover {
	background: #58bde7;

}
#cssmenu > ul > li > a {
	font-size: .9em;
	display: block;
	background: url(menu_images/pattern.png) top left repeat;
	color: #ffffff;
	
	border-top: none;
	
}
#cssmenu > ul > li > a > span {
	display: block;
	padding: 15px 15px;
}
#cssmenu > ul > li > a:hover {
	text-decoration: none;
}
#cssmenu > ul > li.active {
	border-bottom: none;
    font-weight:bold !important;
}
#cssmenu > ul > li.has-sub > a span {
	background: url(menu_images/icon_plus.png) 96% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
	background: url(menu_images/icon_minus.png) 96% center no-repeat;
    background-color: #58bde7;
}
/* Sub menu */
#cssmenu ul ul {
	display: none;
	background: #fff;

}
#cssmenu ul ul li {
	padding: 0;
	border-bottom: 1px solid #5ec0e7;
	border-top: none;
	background: #41b5e4;

}
#cssmenu ul ul li:last-child {
	border-bottom: none;
}
#cssmenu ul ul a {
	padding: 15px 15px;
	display: block;
	color: #fff;
	font-size: .8em;
	font-weight: normal;
}
#cssmenu ul ul a:before {
	/*content: '\00BB';
	position: absolute;
	left: 10px;
	color: #e94f31;*/
}
#cssmenu ul ul a:hover {
	background-color: #58bde7;
}

JavaScript

$(document).ready(function(){

  $('#cssmenu > ul > li:has(ul)').addClass("has-sub");

  $('#cssmenu > ul > li > a').click(function() {
    var checkElement = $(this).next();
    
    $('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active');	
    
    
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      $(this).closest('li').removeClass('active');
      checkElement.slideUp('normal');
    }
    
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
      $('#cssmenu ul ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }
    
    if (checkElement.is('ul')) {
      return false;
    } else {
      return true;	
    }		
  });

});