JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>
        <a href="#">11111</a>
        <ul>
            <li><a href="#">aaaaa</a></li>
            <li><a href="#">bbbbb</a></li>
        </ul>
    </li>
    <li>
        <a href="#">22222</a>
        <ul>
            <li><a href="#">aaaaa</a></li>
            <li><a href="#">bbbbb</a></li>
            <li><a href="#">ccccc</a></li>
        </ul>
    </li>
    <li>
        <a href="#">33333</a>
        <ul>
            <li><a href="#">aaaaa</a></li>
            <li><a href="#">bbbbb</a></li>
            <li><a href="#">ccccc</a></li>
        </ul>
    </li>
    <li>
        <a href="#">44444</a>
        <ul>
            <li><a href="#">aaaaa</a></li>
            <li><a href="#">bbbbb</a></li>
            <li><a href="#">ccccc</a></li>
        </ul>
    </li>
    <li>
        <a href="#">55555</a>
        <ul>
            <li><a href="#">aaaaa</a></li>
            <li><a href="#">bbbbb</a></li>
        </ul>
    </li>
</ul>
</div>

CSS

.menu ul {margin:0;padding:0;list-style:none;display:table;}
.menu > li {display:table-cell;position:relative;vertical-align: middle;border-bottom: solid 5px transparent;}
.menu li {background:black;}
.menu li:hover {background:white;}
.menu li:first-child:hover a{color:black;}
.menu li:hover a{color:white;}
.menu li a {display: block;padding: 10px 20px;text-decoration:none;font: 1em/1.2 Tahoma, sans-serif;color:#fff;}
.menu > li:hover {border-bottom: solid 5px #000;}
.menu ul {position:absolute;top:110%;display:none;width:140%;}
.menu li:hover > ul {display:block;z-index:9999;}
.menu ul a {border-bottom: 2px solid #ccc;white-space:nowrap;}