JSFiddle - React, Tailwind, and code Playground

by Matt Clark

HTML

<ul id="nav">
    <li>Things to Do
        <ul>
            <li>Sporting Events</li>
            <li>Restaurants</li>
            <li>Events</li>
            <li>Etc......</li>
        </ul>
    </li>
    <li>Neighborhoods</li>
    <li>Plan your trip</li>
</ul>

CSS

ul#nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#nav li {
    position: relative;
    display: inline-block;
    height: 30px;
}
ul#nav li ul {    /* This is the drop down menu */
    position: absolute;
    display: none;
    top: 30px;    /* Must be the same as the <li> height above */
    left: 0;
}
ul#nav li:hover ul { /* Here's the magic */
    display: block
}
ul#nav ul {
    background: yellow;
    margin: 0;
    padding: 0;
}