JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <ul>
        <li>
            <a href="#">Main Menu 1</a>
            <ul>
                <li><a href="#">Submenu 1.1</a></li>
            </ul>
        </li>        
        <li>
            <a href="#">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>
            <a href="#">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>
            <a href="#">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 */
}

ul li:hover ul {
    display: block;      /* Show the submenu when hovering 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 0 (default) or 7px depending on if it's the only child */
    /* Another solution could be to use border-radius with :not(:only-child) */
}

#menu > ul > li:last-child:hover {
    border-top-right-radius: 7px;   /* The same as above, but for the last child */
    border-bottom-right-radius: 7px;
}

/* Submenu border-radius */
#menu ul li...