JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
<ul>
  <li>
    <a href="">Main I</a>
  </li>
  <li>
    <a href="">Main II</a>
    <ul>
      <li>
        <a href="">Unter Ueberschrift</a>
      </li>
      <li>
        <a href="">Unter Ueberschrift</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="">Main III</a>
  </li>  
  <li>
    <a href="">Main IV</a>
  </li>  
  <li>
  <a href="">Main V</a>
    <ul>
      <li>
        <a href="">Unter Ueberschrift</a>
      </li>
      <li>
        <a href="">Unter Ueberschrift</a>
      </li>
    </ul>
  </li>
</ul>
</div>

CSS

.nav {
  text-align:left;
  font-size: 15px;
  max-width:1200px;
  margin:0px auto;
  }


.nav > ul {
    padding: 0;
    list-style: none;
    display: inline-table;
    background: #ff0000;
}

.nav > ul > li {
    float:left;
    padding:20px;
}

.nav ul ul {
  background: #c0c0c0;
}