JSFiddle - React, Tailwind, and code Playground

by swift29

HTML

<div class="clearfix menu-header">
    <ul id="menu-default" class="clearfix menu">
        <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-59">
            <a href="#">News</a>
        </li>
        <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
            <a href="http://1skateparks.co.uk/about-us/">About Us</a>
            <ul class="sub-menu">
	            <li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-258">
                    <a href="http://1skateparks.co.uk/the-team/">The Team</a>
                </li>
                <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
                    <a href="http://1skateparks.co.uk/designs/">Designs</a>
                </li>
                <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">
                    <a href="http://1skateparks.co.uk/construction/">Construction</a>
                </li>
                <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">
                    <a href="http://1skateparks.co.uk/references/">References</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-246" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-246">
            <a>Media</a>
            <ul class="sub-menu">
                <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55">
                    <a href="http://1skateparks.co.uk/pictures/">Pictures</a>
                </li>
                <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56">
                    <a...

CSS

.menu-header{
	position:fixed;
	top:150px;
	z-index:10000;
}

.menu li{
    list-style:none;
}

.current_page_item a{
	width:210px!important; 
	color:#ffffff!important;
	background:rgba(90,90,90,0.7) !important;
}

.menu-item a{
	display:block;
	background-color:rgba(136,136,136,0.7);
	font-size:22px;
	font-weight:700;
	color:#bbbbbb;
	text-decoration:none;
	margin:5px 0;
	padding:4px 0 12px 10px;
	height:24px!important;
	width:180px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.menu-item a:hover{
	color:#ffffff!important;
	width:210px;
	background-color:rgba(90,90,90,0.7);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.sub-menu{
	display:none;
	margin:0 0 0 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.sub-menu li a {
	background:rgba(100,100,100,0.7);
	padding-left:30px;
	width:160px;
}

.menu-item-28 ul{
	display:none!important;
}

.sub-menu li a:hover {
	background:rgba(70,70,70,0.7);
	width:190px;
}

.menu-item-249 a, .menu-item-246 a{
	background:rgba(136,136,136,0.7) url("./imgs/arrow2.png") no-repeat;
	background-position:158px 13px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.menu-item-249, .menu-item-246{
	min-height:100%;
}

.menu-item-249:hover > a, .menu-item-246:hover > a{
	background:rgba(90,90,90,0.7) url("./imgs/arrow.png") no-repeat;
	width:210px;
	color:#ffffff;
	background-position:188px 13px;
	-webkit-transition: all 0.2s...

JavaScript

$('#menu-item-246 > a').mouseenter(function() {
    $('#menu-item-246 > ul').show();
});
$('#menu-item-246').mouseleave(function() {
    $('#menu-item-246 > ul').hide();
});
$('#menu-item-249 a').mouseenter(function() {
    $('#menu-item-249 > ul').show();
});
$('#menu-item-249').mouseleave(function() {
    $('#menu-item-249 > ul').hide();
});