JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<ul class="nav-items">
    <li>Item 1</li>
    <li>Item 2
        <div class="nav-dropdown">
            <ul>
                <li>Element 1 here</li>
                <li>Element 2 here</li>
                <li>Element 3 here</li>
            </ul>
            
            <div class="container-div">
                <div>ELEMENT 1 CONTENT</div>
                <div>ELEMENT 2 CONTENT</div>
                <div>ELEMENT 3 CONTENT</div>
            </div>
        </div>
    </li>
    <li>Item 3</li>
    <li>Item 4</li>
<ul>

CSS

.nav-items {
    width: 500px;
}

.nav-items li {
    float: left;
    position: relative;
    display: inline-block;
    margin: 0 5px;
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: 17px;
    left: 0;
    width: 450px;
}

.nav-items li:hover {
    cursor: pointer;
}

.nav-items li:hover .nav-dropdown {
    display: block;
}

.nav-dropdown ul {
    float: left;
    width: 120px;
    overflow: auto;
    border: 1px solid #000;
    background-color: #EEE;
}

.nav-dropdown ul li {
    background-color: #ccc;
    padding: 3px;
    margin: 3px;
}

.nav-dropdown ul li.active {
    color: #F00;
}

.nav-dropdown .container-div {
    position: relative;
    float: left;
    width: 200px;
    background-color: #EEE;
}

.nav-dropdown .container-div div {
    display: none;
    position: absolute;
    padding: 3px;
    margin: 3px;
}

.nav-dropdown .container-div div.active {
    display: block;
}

JavaScript

var $divElements = $('.nav-dropdown .container-div').find('div');

$('.nav-dropdown li').on('hover', function(e){
    var $that = $(this),
        index = $that.index();
    
    $divElements.parent().show();
    
    $that.parent().find('li').removeClass('active');
    
    $that.addClass('active');
    
    $divElements.removeClass('active');
    $divElements.eq(index).addClass('active');
});
    
$('body').on('hover', function(){
    $('.nav-dropdown li').removeClass('active');
    $divElements.parent().hide();
});
    
/*$('.nav-dropdown li').hover(
    function(){
        var $that = $(this),
            index = $that.index();
        
        $that.addClass('active');
        
        $divElements.eq(index).addClass('active');
    },
    function(){
        var $that = $(this),
            index = $that.index();
        
        $that.parent().find('li').removeClass('active');
        $divElements.removeClass('active');
    }
); */