JSFiddle - React, Tailwind, and code Playground

by mgrcic

HTML

<li><a href="http://www.w3schools.com">Home</a></li>
<li><a href="http://www.w3schools.com">Biographie</a>
<ul>                                   
     <li><a href="http://www.w3schools.com">Einleitung</a></li>
     <li><a href="http://www.w3schools.com">Matisse</a></li>  
     <li><a href="http://www.w3schools.com">Mein Portraitt</a></li>                                   
</ul> 
</li>
<li><a href="http://www.w3schools.com">Werke</a></li>

CSS

body ul{
    display: none;
    position:absolute;
    width: 40%;        
    background: #7ac0da;
    border-top: 5px solid #7ac0da;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
body ul li a{
    line-height: 3.1em;
    color: white !important;
}

body ul li a:hover{    
    color: #D14836 !important;
}

body li{
float:left;
margin: 5px;
}

JavaScript

$(function() {
    $("body li").each(function() {
        if ($(this).find("ul").length > 0) {

            //show subnav on hover  
            $(this).mouseenter(function() {
                $(this).find("ul").stop(true, true).slideDown();
            });

            //hide submenus on exit  
            $(this).mouseleave(function() {
                $(this).find("ul").stop(true, true).slideUp();
            });

            $(this).find("ul").mousemove(function() {
                $(this).stop(true, true).show();
            });
        }
    });
});