JSFiddle - React, Tailwind, and code Playground

HTML

<!-- sample Drupal markup -->
<div id="bg">
    <ul class="menu">
        <li class="first leaf">Item 1</li>
        <li class="leaf">Item 2</li>
        <li class="expanded">Item 3
            <ul class="menu">
                <li class="leaf">Sub-item 1</li>
                <li class="leaf">Sub-item 2</li>
                <li class="leaf">Sub-item 3</li>
            </ul>
        </li>
        <li class="leaf last">Last item</li>
    </ul>
</div>
<div id="slider"></div>

CSS

#bg {
    background-color: yellow;
    width: 400px;
    height: 70px;
}
#slider {
    background-color: green;
    width: 400px;
    height: 70px;
}
ul {
    float: left;
    margin: 0;
    padding: 0;
}
ul li {
    position: relative;
    float: left;
    list-style: none;
    list-style-image: none;
    /* DRUPAL!! */
    padding: .5em 1em;
    margin: 0;
    cursor: pointer;
}
#bg > .menu > li {
    height: 70px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
ul li ul {
    display: none;
    position: absolute;
    width: 120px;
    left: 0;
    top: 100%;
}
ul li:hover ul {
    display: block;
}