JSFiddle - React, Tailwind, and code Playground

by Daniel Lisik

HTML

<ul>
<li>Menu 1
    <ul>
        <li>Menu 1-1</li>
    </ul>
</li>
<li>Menu 2
    <ul>
        <li>Menu 2-1</li>
    </ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>

CSS

body { margin:0; }

ul {
    list-style:none;
    background:#2E94C7;
    padding:10px;
    color:white;
}

body ul li {
    position:relative;
}
ul, li {
    margin:0;
    padding:0;
}
li {
    display:inline-block;
    padding:10px;
}
ul li ul {
    display:none;
    position:absolute;
    width:100%;
    background:black;
    margin:10px 0 0 -10px;
}
ul li ul li {
    display:block;
}
ul li:hover ul {
    display:block;
}