JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <ul>
        <li id="menu1">
            <a href="#menu1">Main Menu 1</a>
            <ul>
                <li><a href="#">Submenu 1.1</a></li>
            </ul>
        </li>        
        <li id="menu2">
            <a href="#menu2">Main Menu 2</a>
            <ul>
                <li><a href="#">Submenu 2.1</a></li>
                <li><a href="#">Submenu 2.2</a></li>
                <li><a href="#">Submenu 2.3</a></li>
                <li><a href="#">Submenu 2.4</a></li>
            </ul>
        </li>
        <li id="menu3">
            <a href="#menu3">Main Menu 3</a>
            <ul>
                <li><a href="#">Submenu 3.1</a></li>
                <li><a href="#">Submenu 3.2</a></li>
            </ul>
        </li>  
    </ul>
</div>

<div id="menu">
    <ul>
        <li id="menu4">
            <a href="#menu4">Main Menu 1</a>
            <ul>
                <li><a href="#">Submenu 1.1</a></li>
                <li><a href="#">Submenu 1.2</a></li>
                <li><a href="#">Submenu 1.3</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

ul, li {
    margin: 0;         /* Remove list default margin */
    padding: 0;        /* Remove list default padding */
    list-style: none;  /* Remove list default style */
}

ul li {
    display: inline-block;  /* Make menu horizontal */
    position: relative;     /* Make the submenu positioned from this */
}

ul li ul {
    display: none;       /* Hide the submenu from start */
    position: absolute;  /* Makes the submenu pop-out from the main menu */
}

/* :target checks the url for anchor links and links them to an id. So if #menu1 is in the url #menu1:target is true.
The negative part of this is that each menu part has to have it's own id.
Also first time trying this so there might be other better solutions. */
ul li#menu1:target ul,
ul li#menu2:target ul,
ul li#menu3:target ul,
ul li#menu4:target ul {
    display: block;      /* Show the submenu when clicking on the main menu */
}

/* Styling - This code below is not necessary */
#menu { margin: 50px; } /* just for this jsfiddle demo */

ul {
    display: inline-block;  /* Makes the menu contract to content rather than expand to 100% */
    border-radius: 7px;     /* Nice rounded borders */
    background: #efefef;    /* Add default color */
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
}

ul li a {
    display: block;      /* Allows us to use the a-tag to set the size of the button */
    padding: 10px 20px;  /* setting sizes on the a-tag makes the whole button clickable rather than only the text */
    white-space: nowrap; /* Forces the buttons to be as wide as the text */
}

ul li:hover {
    background: #4b545f; /* Add color when hovering */
}

ul li:only-child:hover {
    border-radius: 7px;  /* If only one child, we want border radius on all sides */
}

/* main menu border-radius */
#menu > ul > li:first-child:hover {
    border-top-left-radius: 7px;    /* using border-top-left-radius instead of border-radius: 7px 0 0 7px */
    border-bottom-left-radius: 7px; /* Allows the other corners to be...