JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mainmenu">
    <li>First</li>
    <li class="dir">
        Second
        <ul>
            <li>Second .1</li>
            <li>Second .2</li>
            <li>Second .3</li>
        </ul>                
    </li>
    <li>Third</li>
</ul>
<div class="clear">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
</div>

CSS

ul.mainmenu {
    font: 20px Arian,sans-serif;
    padding: 5px;
}
li {
    padding: 2px 5px;  
    display: block;        
}
ul.mainmenu>li {
    float: left;
    display: block;
    margin-right: 30px;
    cursor: pointer;
    position: relative;
    border-left-width: 10px;
}
ul.mainmenu>li.dir:hover {
    border: 1px solid #ddd;
    border-bottom: none;
    margin: -1px 29px 0 -1px;
}
ul.mainmenu>li:hover {
    margin-top: -3px;
    border-top: 3px solid black;
    background: white;
}
li>ul {
    display: none;
    float: left;
    position: absolute;            
    top: 27px;
    left: -1px;            
}
li:hover ul {
    display: block;
    border: 1px solid #ddd;
    background: white;
    z-index: -1;
}
li ul li {
    clear: both; 
    margin: 0;    
    white-space:nowrap; 
}
li ul li:hover {
    border-left: 3px solid black; 
    margin-left: -3px;        
}
.clear {
  clear: both;
  display: none;
}