JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li class="menu-item menu-item-has-children dropdown">
    <a title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
    <ul role="menu" class=" dropdown-menu">
        <li class="menu-item dropdown">
            <a title="About" href="#">About</a>
            <ul role="menu" class="dropdown-menu">
                <li class="menu-item">
                    <a title="Image Alignment" href="#">Image Alignment</a>
                </li>
            </ul>
        </li>
    </ul>
</li>
</ul>

CSS

li.menu-item.dropdown .dropdown-menu {
    position: absolute;
    top: 70px;
    visibility: hidden;
    margin-top: 0;
}

li.menu-item.dropdown:hover > .dropdown-menu {
    display: block;
}

li.menu-item.dropdown:hover > .dropdown-menu {
    visibility: visible;
}