JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<div id="wrapper">
<ul id="menu">
    <li><a href="#">one</a></li>
    <li id="child"><a href="#">two</a>
        <div id="sub-wrap">
        <ul id="sub">
        <li><a href="#">one<a></li>
         <li><a href="#">one<a></li>
        </ul>
        </div>
    </li>
    <li>three</li>
</ul>

</div>

CSS

#wrapper {
    position: relative;
    width: 200px;
    background: black;
    float: left;
    clear: both;
    padding-bottom: 12px;
}
#menu {
    float: left;
     position: relative;
     width: 200px;
     background: red;
    
}
#menu li {
 display: block;
 background: red;
 padding: 10px;   
 float: left;

}
#sub {    
padding: 4px; 
display: block;
    width: 100%;
}
#sub li {
 background: green;  
}
#sub-wrap {
position: absolute;
top: 50px;
display: none;
height: 40px;   
z-index: 4;
}
#menu li {
    width: 40px;
}
#child {
 position: relative;   
}
#child:hover #sub-wrap {
    display: block;
}
#child:hover > a:first-child {
    background: grey;
    position: absolute;
    width: 50px;
    color: black;
    top: 0;
    left: -5px; 
    padding: 16px 0;
    text-align: center;
}