JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">
    <div>Menu 1
        <ul>
            <li>
                <ul>
                    <li>Submenu 1</li>
                    <li>Sebmenu 2</li>
                </ul>
                Item 1 &gt;
            </li>
            <li>Item 2</li>
        </ul>
    </div>
    <div>Menu 2
        <ul>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
</div>

CSS

#navbar {
    background-color:#f88;
    position:relative;
}
#navbar>div{
    border: 1px solid black;
    display:inline-block;
}
#navbar ul {
    position:absolute;
    display:none;
    background-color:#f88;
    margin:0;
    list-style-type:none;
    padding:4px;
    width:100px;
    border:1px solid black;
}
#navbar ul ul {margin-left:100px}
#navbar :hover>ul,#navbar :focus>ul{display:block}
*:focus{background:blue}