JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div id="nav">
    <div class="container">
        <div class="pull-left ">
            <img class="logo-image" src="http://placehold.it/80x50" />
        </div>
        <ul class="pull-left">
            <li class="logo"><a href="#">Home</a>

            </li>
            <li><a href="#">About</a>

            </li>
            <li> <a href="#">Projects</a>

                <ul>
                    <li><a href="#">Stealth Game </a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

#nav li {
    display:inline-block;
    padding-right : 5px;
}
#nav ul ul {
    display:none;
    position:absolute;
    z-index:999;
}
#nav li li {
    float: auto;
}
#nav li a {
    width:150px;
    display: inline-block;
    text-align:center;
    color:#000;
    margin-right:5px;
    height:35px;
    line-height:35px;
    text-decoration:none;
    font-size:80%;
    border:1px solid #ccc;
}
#nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
#nav li li a {
    background:#EBE7E6!important;
    text-align:left;
    height:auto;
    line-height:1;
    width:150px;
    padding:8px 20px 8px 22px;
    border:1px solid #D0D0D0;
    border-top:none;
    margin-right:0;
}

JavaScript

$(document).ready(function () {
    $("#nav li:has(ul)").hover(function () {
        $(this).find("ul").slideDown();
    }, function () {
        $(this).find("ul").hide();
    });
});