JSFiddle - React, Tailwind, and code Playground

by VanessaKing

HTML

<div class="menu-blacks-menu-container">
    <ul id="menu-blacks-menu" class="menu"><li id="menu-item-244" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-244"><a href="#">Breakfast</a>
<ul class="sub-menu">
	<li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-241"><a href="http://www.blackspub.com.php53-9.dfw1-1.websitetestlink.com/197">Traditional Breakfast</a></li>
	<li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-243"><a href="http://www.blackspub.com.php53-9.dfw1-1.websitetestlink.com/199">Quick Starts</a></li>
	<li id="menu-item-242" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-242"><a href="http://www.blackspub.com.php53-9.dfw1-1.websitetestlink.com/201">Beverages and Sides</a></li>
</ul>
</li>
<li id="menu-item-245" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-245"><a href="#">Lunch</a>
<ul class="sub-menu">
	<li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-246"><a href="http://www.blackspub.com.php53-9.dfw1-1.websitetestlink.com/203">Beer on Tap</a></li>
	<li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-247"><a href="http://www.blackspub.com.php53-9.dfw1-1.websitetestlink.com/205">Bottles</a></li>
	<li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-253"><a href="http://www.blackspub.com.php53-9.dfw1-1.websitetestlink.com/207">Wine by the Glass</a></li>
	<li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-250"><a href="http://www.blackspub.com.php53-9.dfw1-1.websitetestlink.com/209">Lunch Salads</a></li>
	<li id="menu-item-252" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-252"><a...

CSS

ul#menu-blacks-menu.menu li {clear:both;}
ul#menu-blacks-menu.menu li, ul#menu-blacks-menu.menu li a {text-align:left !important; line-height:30px !important; margin-left:4px;}
ul#menu-blacks-menu.menu li a {
	font-family:&#39;OpenSansRegular&#39;, Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:16px;
	width:214px;
	line-height:30px !important;
    display:block;
    height:30px;
	border:6px solid #000;
    padding-left:6px;
	background: #070707; /* Old browsers */
/* IE9 SVG, needs conditional override of &#39;filter&#39; to &#39;none&#39; */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA3MDcwNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzI2MjMyNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk3JSIgc3RvcC1jb2xvcj0iIzVlMmUyMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  #070707 0%, #262324 96%, #5e2e20 97%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#070707), color-stop(96%,#262324), color-stop(97%,#5e2e20)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #070707 0%,#262324 96%,#5e2e20 97%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #070707 0%,#262324 96%,#5e2e20 97%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #070707 0%,#262324 96%,#5e2e20 97%); /* IE10+ */
background: linear-gradient(to bottom,  #070707 0%,#262324 96%,#5e2e20 97%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(...

JavaScript

function initMenu() {
    $('ul#menu-blacks-menu.menu li ul.sub-menu').hide();
    $('ul#menu-blacks-menu.menu li a').click(

    function() {
        $('ul#menu-blacks-menu.menu li ul.sub-menu').hide('normal');
        $(this).next().slideToggle('normal');

    });

}
$(document).ready(function() {
    initMenu();
});