CSS выровнять подменю по родительскому элементу

#menubar {
  display: block;
  background: #FFFFFF;
}

#menubar ul li a.menubutton {
  display: none;
  /* dont show burger symbol (mobile menu symbol) */
}

#menubar ul {
  display: block;
  width: 2em;
  /* restrict burger symbol */
  padding: 0.9em;
}

#menubar ul li {
  display: inline;
}

#menubar ul li ul li {
  display: none;
}


/*Header*/

header {
  display: block;
  background: #2F2C2C;
  text-align: center;
}


/* Navigation */

nav {
  display: block;
  height: 2.5em;
  background: #FFFFFF;
  text-align: center;
}

nav ul {
  display: block;
}

nav ul li {
  display: inline;
  margin: 0em 0.188em 0em 0.188em;
  position: relative;
}

nav ul li a {
  color: #454040;
  font-size: 1.125em;
  line-height: 2.5em;
  padding: 0.563em 0.938em 0.375em 0.983em;
  transition: background 0.2s;
  /* nice transition effect */
  -webkit-transition: background 0.2s;
}

nav ul li a:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #FF0000;
}

nav ul li a.active {
  border-bottom: 0.188em solid #E7590B;
}

nav ul li ul {
  display: none;
}

nav ul li:hover ul.submenu {
  text-align: center;
  position: absolute;
  display: block;
  left: -50%;
}

nav ul li ul li:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #FF0000;
}

<nav class = "nav">
  <ul>
    <li><a href = "./index.html" class = "active">Start</a></li>
    <li><a href = "./meetings.html">Termine</a></li>
    <li><a href = "./organisation.html">Organisation</a>
      <ul class = "submenu">
        <li><a href = "./organisation/page1.html">Page1</a></li>
        <li><a href = "./organisation/page2.html">Page2</a></li>
        <li><a href = "./organisation/page3.html">Page3</a></li>
      </ul>
    </li>
    <li><a href = "./about.html">About</a>
      <ul class = "submenu">
        <li><a href = "./about/page1.html">Page1</a></li>
        <li><a href = "./about/page2.html">Page2</a></li>
        <li><a href = "./about/page3.html">Page3</a></li>
      </ul>
    </li>
    <li><a href = "./contact.html">Contact</a></li>
  </ul>
</nav>