JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="pageNavigation">
    
    <a href="index.html" class="logo"></a>
    
    <ul class="nav">
        <li><a href="#">Wir über uns</a></li>
        <li><a href="#">Sport</a></li>
        <li><a href="#">Jugend</a></li>
        <li>
            <a href="#">Infos</a>
            <span class="arrow"></span>
            <ul class="submenu">
                <li><a href="#">Sample 01</a></li>
                <li><a href="#">Sample 02</a></li>
            </ul>
        </li>
        <li><a href="#">Kontakt</a></li>
    </ul>
    
</div>

CSS

.nav {
    list-style: none;
    margin: 0px;
    padding: 0px;
    float: left;
    border: 1px solid red;
}

.nav li { 
    float: left; 
    position: relative;
}

.nav a {
    color: red;
    float: left;
    height: 50px;
    line-height: 50px;
    padding: 0px 10px;
}

.submenu { 
    display: none;
    list-style: none;
    margin: 0px;
    padding: 0px;
    float: left;
    position: absolute;
    z-index: 50;
    top: 50px;
    left: 0px;
    width: 100px;
    background: red;
}
    
.submenu li {
    float: left;
    clear: both;
}
.submenu a {
    color: white;
}

.arrow {
    display: none;
    position: absolute;
    z-index: 51;
    top: 50px;
    left: 50%;
    margin: -10px;
    width: 20px;
    height: 20px;
    background: black;
}

JavaScript

$(".nav li").on("mouseenter mouseleave", function(e) {

    var list = $(this),
        arrow = list.find('.arrow'),
        sub = list.find('.submenu');
    
    if ( e.type === 'mouseenter') {
        
        arrow.show();
        sub.stop(true,true).slideDown( 400 );
        
    }
    else if ( e.type === 'mouseleave' ) {
        
        arrow.hide();
        sub.stop(true,true).slideUp( 400 );

    }

});