JSFiddle - React, Tailwind, and code Playground

by Anatol

HTML

<body>
<div id="con-top">
    Wrapper-Top
</div>

<div id="con-logobox">
    <!-- Logo usw. -->
    <div id="con-logo">
        <a href="#" >        
        <h1>Grossartiges Logo</h1>
        </a>
    </div>
</div>

<div id="naviwrapper">
    <div class="cat_navi">
    
    <div id ="cat_navi_1" class="cat_navi_naviitem">
    <a href="#" class="link-display-block">Lorum</a>    
    
</div> 
    <div class="cat_navi_content" style="position:absolute; display: none; z-index: 0;">
        <h3>div content</h3>
        Lorem ipsum
        dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
        Lorem ipsum dolor sit amet. 
    </div> 
</div>
        <div class="cat_navi">
    
    <div id ="cat_navi_2" class="cat_navi_naviitem"><a href="#" class="link-display-block">Lorum Lorum</a>
</div> 
    <div class="cat_navi_content" style="position:absolute; display: none;">
        <h3>div content</h3>
        Lorem ipsum
        dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
   ...

CSS

body, html {
    background: #FFFFFF;
    color: #000;    
    font-family: verdana, arial, helvetica;
    font-size: 12px;
    }
#con-top {
    width: 100%;
    height: 20px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #CCCCCC;
    background: #000;
    color: #FFFFFF;
    z-index: 1;
    }
#con-logobox {
    width: 980px;
    height: 71px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #CCCCCC;
    background: #FFF;
    z-index: 1;
    }
#con-catnavi {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #CCCCCC;
    background: #FFF;    
    }
#con-content {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    }
.navi-item-link {
    display: block;
    height: 20px;
    padding: 5px;
    }
#naviwrapper {
margin-top:0;
margin-bottom:0;
margin-left: auto;
margin-right: auto;
vertical-align: center;
width: 980px;
    }
    
.clear {
clear:both;    
    }
/* Kategorie-Navigation START */

.cat_navi {
float:left;
z-index:1;
background-color:#DDDDDD;
border: 1px solid black;
width:200px;
height:20px;
margin-right: 5px;
z-index:10000;
    }

.cat_navi_naviitem {
cursor:pointer;
/*background-image: url(images/arrow_down.png);*/
background-repeat:no-repeat;
background-position:bottom right; 
text-align: center;
vertical-align: middle;
    }
    
.cat_navi_naviitem_hover {
background-image: url(images/arrow_up.png);
background-repeat:no-repeat;
background-position:bottom right; 
    }
    
.cat_navi_content {
border:1px solid black;
background-color:#FFFFFF;
width:400px;
margin-left: -1px;
z-index:1;
    }
.link-display-block {
    display: block;
    height:20px;
    line-height: 20px;
    }

JavaScript

$(function() { 
  var que=$({});

  $('.cat_navi_naviitem').mouseover(function() {
    var $this=$(this);
    que.queue(function(next) {
      $this.next().slideDown(500, next);
    });
  }).parent().mouseleave(function() {
    var $this=$(this);
    que.queue(function(next) {
      $this.find('.cat_navi_content').delay(80).fadeOut(100, next);
    });
  });
});