JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menubar clearAfter">
    <li class="menu">
        <a class="header" href="England">England</a>
        <ul>
            <li><a href="Newcastle">Newcastle</a></li>
            <li><a href="Manchester">Manchester</a></li>
            <li><a href="Birmingham">Birmingham</a></li>
            <li><a href="London">London</a></li>
        </ul>
    </li>
    <li class="menu clearAfter">
        <a class="header" href="Elsewhere">Elsewhere</a>
        <ul>
            <li><a href="Edinburgh">Edinburgh</a></li>
            <li><a href="Glasgow">Glasgow</a></li>
            <li><a href="Houston">Houston, TX</a></li>
            <li><a href="Lisbon">Lisbon</a></li>
        </ul>
    </li>
</ul>
<div style="clear: both;"><!-- this div needs to be here to make IE7 behave --></div>
<p>agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa agrdf a sad sad sad saD sa ads adsad sa dsa </p>

CSS

.clearAfter:after {
    clear: both;
    content: '.';
    display: block;
    visibility: hidden;
    height: 0;
}

.menubar {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menubar > li {
    display: block;
    float: left;
}
.menubar > li:not(:last-child) {
    margin-right: 4px;
}


.menu {
    position: relative;
}

.menu a {
    text-decoration: none;
}

.menu .header {
    display: inline-block;
    background: lightblue;
    padding: 4px;
}

.menu ul {
    position: absolute;
    top: 26px;
    left: 0;
    list-style-type: none;
    width: 300px;
    padding: 4px 0 0 0;
    margin: 2px 0 0 0;
    background: white;
    
    -moz-transition: opacity 0.5s, visibility 0.5s;
    -ms-transition: opacity 0.5s, visibility 0.5s;
    -o-transition: opacity 0.5s, visibility 0.5s;
    transition: opacity 0.5s, visibility 0.5s;
    -webkit-transition: opacity 0.5s, visibility 0.5s;
    opacity: 0;
    visibility: hidden;
}

.menu:hover ul {
    opacity: 1;
    -moz-transition: opacity 0.1s;
    -ms-transition: opacity 0.1s;
    -o-transition: opacity 0.1s;
    transition: opacity 0.1s;
    -webkit-transition: opacity 0.1s;
    visibility: visible;
}

.menu li {
    width: 140px;;
    display: block;
    float: left;
    margin: 0;
    padding: 4px;
    background: lightblue;
}
.menu li:nth-child(odd) {
    margin-right: 4px;
    width: 140px;
}