JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
            <ul class="clear">
                <li>
                    text 1
                    <ul class="clear">
                        <li>text 1.1</li>
                        <li>text 1.2</li>
                        <li>text 1.3</li>
                        <li>text 1.4</li>
                    </ul>
                </li>
                <li>text 2</li>
                <li>text 3</li>
                <li>text 4</li>
                <li>text 5</li>
            </ul>
        </div>

CSS

/** ALL UL */
#menu ul{
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    background: #e0e0e0;
    color: #747474;
}
/** ALL LI */
#menu ul li{
    border-right: 1px solid #ffffff;
    padding: 5px 10px;
    position: relative;
}
/** FIRST LEVEL LI */
#menu>ul>li{
    float: left;
}
#menu li ul{
    display: none;
    position: absolute;
    top:20px;
    left: 0;
    width: 200px;
}
#menu li:hover ul{
    display: block;
}
#menu li li{
    border-bottom: 1px solid #ffffff;
}
#menu li li:hover{
    background: #f0f0f0;
}
.clear{
    _zoom:1;
}
.clear:after{
    content: "";
    clear: both;
    display: block;
}