JSFiddle - React, Tailwind, and code Playground

by Joseph Perez

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js&quot;   integrity=&quot;sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="></script>
<nav>
  <ul>
  <li class="menu-item"><span>Stuff1</span>
      <div class="child-list">
      
      </div>
    </li>
    <li class="menu-item">PrivateStuff
      <div class="child-list">
      
      </div>    
    </li>
    <li class="menu-item">Meh Box
      <div class="child-list">
      
      </div>    
    </li>
  </ul>
  
  
  
</nav>

CSS

nav > ul > li{
  list-style-type: none;
  float: left;
  padding: 5px;
  border: 2px solid gold;
  border-radius: 5px;
  background-color: #c2c2c2;
  margin: 5px 2px;
  display: inline-block;
  height: 20px;
}

.menu-item span, .menu-item div{
  float: left;
  width: 100%;
}

.menu-item div{
  display: none;
}

.selected > .child-list{
  display: block;
}

.child-list{
  display: none;
  position: relative;
  margin-top: -30px;
  z-index: -1;
  height: 80px;
  width: 30px;
  background-color: green;
}

JavaScript

/*startted 8:27 AM*/
$(document).ready(function(){
	$(".menu-item").hover(function(){
  	$(this).addClass("selected");
  });
  
  $(".child-list").mouseleave(function(){
  	$(this).parent().removeClass("selected");
  });
});