JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<body>

<div>
    <div id="header" >
        <a href="#"><h1>LOGO</h1></a>



     <div id="main-nav">
            <ul>
                <li>
                    <a href="#" title="#" class="main" style="#">Bier</a>

                    <div class="main-nav-down-layer">
                        <h3>Bier</h3>
                                                   <a href="#"> Suchen &gt;</a>
                                                   <a href="#"> Favorit &gt;</a>
                    </div>
                  </div>

CSS

#header .main-nav-down-layer {
    position:absolute;
    display:none; /*block*/
    left: 0px;
    height: 60px;
    width:217px;
    padding:15px 12px; /* 15px 12px */
    z-index:300;
    line-height:16px;
       background-color:#a3eb98;
  margin-top: 0px;
}

JavaScript

$(function(){
        $('#header li').hover( 
            function() { $(this).find('.main-nav-down-layer').css("display","block"); },
            function() { $(this).find('.main-nav-down-layer').css("display","none");
        });
    });