JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <ul>
        <li><a href="#">Home 1</a></li>
        <li><a href="#">Home 2</a></li>
        <li class="subnav"><a href="#">Home 3</a></li>
    </ul>
</div>
<div id="subnav"></div>

CSS

.header {
    float: left;
    width: 100%;
    height: 50px;
    background: #ccc;
}

.header ul {
    list-style:none;
    padding:0;
    margin:15px 0 0 15px;
}

.header ul li {
    float: left;
    margin-right: 10px;
}

.header ul li a {
    text-decoration:none;
    color: #333
}

.header ul li a:hover {
    color: #0095DA;    
}

#subnav {
    display:none;
    float: left;
    width: 100%;
    height: 100px;
    background: #0095DA;
}

JavaScript

$("ul li.subnav" ).hover(function(){
    $("#subnav").fadeIn();
    $("#subnav").mouseout(function(){
       $(this).fadeOut();
    });
});