JSFiddle - React, Tailwind, and code Playground

by SparrwHawk

HTML

<nav id="nav" role="navigation">
    <div>
        <ul id="menu-primary-menu">
            <li id="menu-item-246"><a href='http://www.test.com'>Home</a>
            </li>
            <li id="menu-item-245">
                <a href='http://www.test.com'>News and Offers</a>
            </li>
            <li id="menu-item-244">
                <a href='http://www.test.com'>Portfolio</a>
            </li>
            <li id="menu-item-243">
                <a href='http://www.test.com'>About Us</a>
            </li>
            <li id="menu-item-253"><a href='http://www.test.com'>Salons</a>
                <ul>
                    <li id="menu-item-254">
                        <a href='http://www.test.com'>Bucklaw Place</a>
                    </li>
                    <li id="menu-item-254">
                        <a href='http://www.test.com'>Bucklaw Place</a>
                    </li>
                    <li id="menu-item-254">
                        <a href='http://www.test.com'>Bucklaw Place</a>
                    </li>
                    <li id="menu-item-254">
                        <a href='http://www.test.com'>Bucklaw Place</a>
                    </li>
                    <li id="menu-item-254">
                        <a href='http://www.test.com'>Bucklaw Place</a>
                    </li>
                    <li id="menu-item-254">
                        <a href='http://www.test.com'>Bucklaw Place</a>
                    </li>
                    
                </ul>
            </li>
        </ul>
    </div>                    
</nav>

CSS

nav,
nav ul,
nav li,
nav a {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

nav {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #0a0a0a);
    background: -o-linear-gradient(#252525, #0a0a0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    background: -webkit-linear-gradient(#252525, #0a0a0a);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    clear: both;
    display: block;
    float: right;
    margin: 0 auto 6px;
    width: 900px;
    height: 50px;
}

.menu img {
    position: relative;
    top: -2px;
}

nav ul {
    font-size: 17px;
    list-style: none;
}

nav li {
    float: left;
    position: relative;    
}

nav a {
    color: #eeeeee;
    display: block;
    text-decoration: none;
    padding: 20px;
}

nav ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    padding-top: 3px;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;  
}

nav ul ul ul {
    left: 100%;
    top: 0;
}

nav ul ul a {
    background: black;
    color: #eee;
    font-size: 13px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 168px;
}

nav li:hover > a,
nav ul ul :hover > a,
nav a:focus {
    background-color: #eeeeee;
}

nav li:hover > a,
nav a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    color: #373737;
}

nav ul li > ul {
    width: 0px;
}

.no-js nav ul li:hover > ul {
    display: block;
}

nav...

JavaScript

$(document).ready (function(){
    $('nav ul li').hover(function(){
        $(this).children('ul')
        .slideDown();
    }, function(){
        $(this).find('ul')
        .slideUp();
    });
});