JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#">Item</a>
    </li>
    <li>
        <a href="#">Item</a>
        <ul class="sub-menu">
            <li>
                <a href="http://google.de">Submenu</a>
            </li>
            <li>
                <a href="http://google.de">Submenu</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Item</a>
    </li>
    <li>
        <a href="#">Item</a>
        <ul class="sub-menu">
            <li>
                <a href="#">Submenu</a>
            </li>
            <li>
                <a href="#">Submenu</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Item</a>
    </li>
</ul>

CSS

ul > li > a {
    float: left;
    clear: both;
}

ul > li:hover > .sub-menu{
    display: block;
}

.sub-menu {
    display: none;
    float: left;
    padding-left: 10px;
}

.sub-menu li {
    float: left;
    padding-left: 10px;
}

.sub-menu li:first-child{
    border-left: 2px solid #333;
}