JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <a href=""><div class="navigation">Navigation</div></a>
    <a href=""><div class="nav_item">Navigation 1</div></a>
    <a href=""><div class="nav_item">Navigation 2</div></a>
    <a href=""><div class="nav_item">Navigation 3</div></a>
    <a href=""><div class="nav_item">Navigation 4 Blahblahahahahaha</div></a>
    <a href=""><div class="nav_item">Navigation 5 asda ad s asasd</div></a>
</div>

CSS

.container { width:auto;float:left; }

.navigation { background-color:silver;float:left;clear:both; }

.nav_item { clear:both;display:none;background-color:silver; }

.container:hover {
    /*background-color:silver;*/
    cursor:pointer;
}

.navigation, .nav_item { padding:5px; }

.navigation:hover, .nav_item:hover { background-color:gray; }

JavaScript

$(function() {
    $(".container").hover(
        function () {
            $(".nav_item").show();
            $(".navigation").css("background-color","gray");
        },
        function () {
            $(".nav_item").hide();
            $(".navigation").css("background-color","silver");
        }
    );
});