JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<div id="nav">
    <div class="nav bad">
        <div class="label">Bad</div>
        <div class="subnav">
            <select id="sel">
                <option>Cats</option>
                <option>Dogs</option>
                <option>Monkeys</option>
                <option>Fish</option>
                <option>Elephants</option>
                <option>Devo</option>
                <option>Mongeese</option>
                <option>TROGDOR!!!!</option>
            </select>
        </div>
    </div>
    <div class="nav good">
        <div class="label">Good</div>
        <div class="subnav">
            <select class="sel">
                <option>Cats</option>
                <option>Dogs</option>
                <option>Monkeys</option>
                <option>Fish</option>
                <option>Elephants</option>
                <option>Devo</option>
                <option>Mongeese</option>
                <option>TROGDOR!!!!</option>
            </select>
        </div>
    </div>
</div>

CSS

#nav{
    width: 50%;
    margin: 16px auto;
    font-family: sans-serif;
}
.nav{
    background-color: #f00;
    width: 50%;
    float: left;
}
.nav .label{
    background-color: #ff0;
    margin: 1px;
    line-height: 24px;
    cursor: pointer;
}
.nav .subnav{
    display: none;
    position: absolute:
    background-color: #ff0;
}
.nav.good:hover .subnav{
    display: block;
}

JavaScript

var navMouseOutHandler = function(e){
    console.log(e.target);
    $(e.target).find('.subnav').hide();
};
var navMouseOverHandler = function(e){
    console.log(e.target);
    $(e.target).find('.subnav').show();
};


$('.nav.bad').bind(
    'mouseenter',
    navMouseOverHandler
).bind(
    'mouseleave',
    navMouseOutHandler
);