JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li><a href="#">Link 1  &raquo;</a>
        <ul>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

CSS

ul {
    width: 200px;
    background: #ccc;
    list-style: none;
    padding: 0;
    border: 1px solid #999;
}
ul li {
    border-bottom: 1px solid #999;
    position: relative;
}
ul li:last-child {
    border-bottom: none;
}
ul li a {
    color: #000;
    display: block;
    padding: 5px;
}

.menu li:hover > a {
    background:#999;
}

ul li ul {
    display:none;
    position: absolute;
    top:0;
    left: 200px;
}
ul li:hover > ul {
    display: block;
}