Navigation / nav ul.level_2 / Flexbox / Knoten im Kopf

[Drive]

Hallo zusammen,

ich habe gerade ein kleines Problem und bin mir nicht sicher ob es sich mit Flexbox überhaupt lösen lässt.
Ich möchte gern Navigationspunkte ohne .submenu untereinander darstellen und Navigationspunkte mit .submenu nebeneinander.
flex.jpg

header nav > ul {
  position: relative;
  display: flex;
  width: 800px;
  margin: 0 auto;
  padding-left: 108px;
}

header nav a {
  display: block;
  color: #5e5e5e;
  text-decoration: none;
}

header nav ul.level_1 > li {
  color: #5e5e5e;
  list-style: none;
  transition: 0.5s;
  text-transform: uppercase;
  padding: 5px 15px 5px 15px;
}

header nav > ul > li:hover {
  color: #6ab346;
}

header nav ul.level_2 {
  position: absolute;
  display: flex;
  flex-wrap: wrap; 
  width: 800px;
  top: -9999px;
  left: 0;
  padding: 30px 30px 15px 30px;
  background: #fff;
  text-align: left;
  border-top: 5px solid #6ab346;
  box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.10);
  z-index: 1001;
}

header nav ul li:hover ul.level_2 {
  top: 100%;
}

header nav ul.level_2 li.submenu {
  width: 25%;
  display: block;
  text-transform: uppercase;
  transition: 0.5s;
  font-weight: bold;
}

header nav ul.level_3 li a span {
  display:inline-block;
  margin-top: 10px;
}

header nav ul.level_3 li {
  text-transform: none;
  font-weight: normal;
}

header nav ul.level_3 li.active {
  margin-top: 10px;
}

header nav ul.level_2 ul li a:hover {
  color: #6ab346;
}

Ist das mit Flexbox überhaupt möglich bzw. hat jemand eine bessere Lösung dafür?

Gruß D.