JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <nav id="menu">
        <span id="nav_button">&equiv;</span>
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a>
                <ul>
                    <li><a href="">SubLink 1</a></li>
                    <li><a href="">SubLink 2</a></li>
                </ul>
            </li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </nav>
</header>

CSS

* {
    margin: 0;
    padding: 0;
}

header {
    background-color: #C0C0C0;
}

#menu {
    display: table;
    /* описание ниже */
    width: 100%;
    border-collapse: collapse;
    -webkit-box-sizing: border-box;
    /* описание ниже */
    -moz-box-sizing: border-box;
    /* описание ниже */
    box-sizing: border-box;
    /* описание ниже */
}

#menu > ul {
    display: table-row;
    /* описание ниже */
    background-color: #FFFFFF;
    list-style: none;
}

#menu > ul > li {
    position: relative;
    display: table-cell;
    /* описание ниже */
    border: 1px solid #999999;
}
#menu > ul ul {
    position: absolute;
    top: 100%;
    margin-top: 1px;
    width: 100%;
    display: none;
}
#menu > ul > li:hover > ul {
    display: block;
}
#menu ul li a {
    display: inline-block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 1.2em;
    text-align: center;
}
#menu ul ul li {
    display: block;
    background-color: #FFFFFF;
    border: 1px solid #999999;
    border-top: none;
}

#menu ul li a:hover {
    background-color: #990000;
    color: #FFFFFF;
}

#nav_button {
    display: none;
    width: 50px;
    height: 50px;
    font-size: 2.5em;
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid #949494;
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    /* описание ниже */
    #menu {
        display: inline-block;
        position: relative;
        width: auto;
    }
    #menu ul {
        display: none;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 20;
    }
    #menu > ul > li {
        display: list-item;
        border-top: none;
    }
    #nav_button {
        display: inline-block;
    }
    #menu:hover,
    #menu.open_nav {
        width: 100%;
        -webkit-user-select: none;
        /* описание ниже */
        -moz-user-select: none;
        /* описание ниже */
        -webkit-touch-callout: none;
        /* описание ниже */
    }
   ...