JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Testing menu</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>
            Home
            <div>Home content</div>
          </li><li>
            About
            <div>About content</div>
          </li><li>
            Something else
            <div>se content</div>
          </li><li>
            Something different
            <div>sd content</div>
          </li><li>
            Etc.
            <div>Etc. sub</div>
          </li>
        </ul>
      </nav>
      <div>banner</div>
    </header>
  </body>
</html>

CSS

body {
  width: 728px;
  margin: 4px auto;
}
header {
  width:726;
  height: 120px;
  position:relative;
  border-radius: 8px 8px 0 0;
  border: 1px solid #cccccc;
  background-color: #eeeeee;
}
nav > ul {
  width: 726px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav > ul > li {
  display: inline-block;
  width: 144.4px;
  height:20px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  cursor: default;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.05);
}
nav > ul > li:first-child {
  border-top-left-radius: 7px;
}
nav > ul > li:last-child {
  border-top-right-radius: 7px;
  border-right: 0;
}
nav > ul > li:hover {
  border-bottom: 0;
  border-right:0;
  background-color: transparent;
}
nav > ul > li:hover + li {
  border-left: 1px solid #cccccc;
}
header div {
  position:absolute;
  left:0;
  right:0;
  top: 20px;
  bottom: 0;
}
li > div {
  visibility: hidden;
}
nav > ul > li:hover > div {
  visibility: visible;
}
nav:hover + div {
  visibility: hidden;
}