JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<div id="nav">
    <ul>
        <li><a href="#">menu item</a>
            <ul>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
            </ul>
        </li>
        <li><a href="#">menu item</a>
            <ul>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
            </ul>
        </li>
        <li><a href="#">menu item</a>
            <ul>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
            </ul>
        </li>
        <li><a href="#">menu item</a>
            <ul>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
            </ul>
        </li>
        <li><a href="#">menu item</a>
            <ul>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
            </ul>
        </li>
    </ul>
</div>
<div id="main">
    <p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p>
</div>

CSS

#nav {
    background-color:red;
}
#main {
    background-color:pink;
}
#nav > ul > li {
    display:inline-block;
}
#nav > ul > li > ul {
    display:none;
    position:absolute;
    background-color:blue;
    color:white;
}
#nav > ul > li:hover > ul {
    display:block;
}