JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
<li><a href="#">Test 0</a>
    <div class="dropDown">
        <ul>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>          
        </ul>
        <ul class="wide">
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>       
        </ul>
         <ul>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>
            <li>abcd abvadasd</li>       
        </ul>
    </div>
</li>
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
</ul>

CSS

#nav > li {
    position: relative;
    float: left;
    background: silver;
    padding: 10px;
}
#nav > li > div {
    position: absolute;
    display:none;
    background: grey;
    padding: 10px;
    top: 100%;
    left:0;
}
#nav > li:hover > div {
    display: table-row;
}
#nav > li ul {
    display: table-cell;
    padding: 0 10px 10px 0;
    
}
#nav > li ul li {
    width: 100px;
}
#mav > li ul.wide li {width:300px;overflow:hidden;color:red;}