JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <nav id="top-nav">
        <div id="main-nav-container">
            <div class="menu">
                <ul>
                    <li><a href="/">Item 1</a></li>
                    <li><a href="/">Item 2</a></li>
                    <li><a href="/">Item 3</a></li>
                    <li><a href="/">Item 4</a></li>
                </ul>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="/">Other 1</a></li>
                    <li><a href="/">Other 2</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

CSS

html, body { margin: 0; padding: 0; height: 100%; }
html { font-size: 100%; font-family: sans-serif; }
body { font: 0.75em Helvetica,Arial,sans-serif; }

#top-nav, #top-nav div.menu ul li {
  background-color: #444;
}

#main-nav-container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 40px;
  display: -webkit-inline-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-justify-content: -moz-space-between;
  -ms-justify-content: -ms-space-between;
  justify-content: space-between;
}

#top-nav div.menu {
  -webkit-flex: 1;
  display: -webkit-inline-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

#top-nav div.menu:last-child > ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
#top-nav div.menu:last-child {
  -webkit-justify-content: flex-end;
}

#top-nav div.menu,
#top-nav div.menu ul {
  text-align: left;
  alignment-baseline: baseline;
  margin: 0;
  padding: 0;
}
#top-nav div.menu ul {
  list-style: none;
  display: inline-block;
}
#top-nav div.menu > ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#top-nav div.menu > ul {
  white-space: nowrap;
}
#top-nav div.menu li {
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
}

#top-nav li {
  margin: 0
}

#top-nav div.menu ul li {
  position: relative;
  font-size: 1.1em;
  cursor: pointer;
}
#top-nav div.menu ul li.selected {
  background-color: #5e87b0;
}

#top-nav div.menu ul li a {
  text-shadow: 0 0 2px #000000;
  color: #E6E6E6;
  text-decoration: none;
  display: block;
  padding: 7px;
}

#top-nav div.menu ul li:hover {
  background-color: #666;
}

#top-nav div.menu ul li:hover li {
  clear: both;
  min-width: 130px;
  white-space:nowrap;
}