JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="menu">
    <div><a href="#">Home</a></div>
    <div>
        <a href="#">1</a>
        <nav>
            <div><a href="#">1.1</a></div>
            <div><a href="#">1.2</a></div>
            <div><a href="#">1.3</a></div>
        </nav>
    </div>
    <div>
        <a href="#">2</a>
        <nav>
            <div><a href="#">2.1</a></div>
            <div><a href="#">2.2</a></div>
            <div><a href="#">2.3</a></div>
        </nav>
    </div>
    <div><a href="#">3</a></div>
</nav>

CSS

#menu > div {
    background: #444;
    position: relative;
}
#menu > div.active {
    background: #00b;
}
#menu > div.active > a {
    font-weight: bold;
}
#menu div > a {
    padding: 4px 14px;
    white-space: nowrap;
}
#menu a {
    display: block;
    color: #ddd;
}
#menu > div > nav {
    display: none;
    position: absolute;
    z-index: 9999;
}
#menu > div > nav > div {
    background: #444;
    border-top: 2px outset #222;
}
#menu > div > nav > div:last-child {
    border-radius: 0px 0px 4px 4px;
}
#menu > div:hover > nav {
    display: block;
}
#menu div:hover {
    background: #03c;
}
@media screen and (min-width: 450px) {
    #menu {
        font-size: 120%;
    }
    #menu > div {
        float: left;
        margin: 0 1px;
    }
    #menu > div:first-child {
        border-radius: 4px 0px 0px 4px;
    }
    #menu > div:last-child {
        border-radius: 0px 4px 4px 0px;
    }
}
@media screen and (max-width: 450px) {
    #menu > div > nav {
        box-shadow: 0 3px 3px 1px #000;
        width: 100%;
    }
}