Horizontal mega menu with flexbox I created a mega menu using flexbox, and because I'm not really into CSS, a review would be helpful.

I know it would be better to avoid the third ul-level but this is not possible, because the HTML is generated by another system. And we decided to use the second ul level as a marker for a new row in the mega menu.

With saying "Mega Menu" I mean that when you hover over "products" you will not just see a single list of sub items, but instead multiple lists. Often in "Mega Menus" they also add more content like text or pictures (not needed for me).



ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
  position: relative;
  background: red;
}
ul li {
  flex: 1 1 auto;
  display: block;
  text-align: left;
}
ul li:hover {
  background: tomato;
}
ul li:hover ul {
  display: flex;
}
ul li a {
  display: block;
  padding: 1rem 0;
}
ul li ul {
  display: none;
  left: 0;
  width: 100%;
}
ul li ul li {
  flex: 0 0 auto;
}

@media screen and (min-width: 37.5em) {
  ul {
    flex-direction: row;
  }
  ul li {
    text-align: center;
    background: green;
  }
  ul ul {
    position: absolute;
  }
  ul ul a {
    padding: 1rem;
  }
  ul ul li {
    position: relative;
    text-align: left;
  }
  ul ul li ul {
    position: relative;
  }
  ul ul li ul li {
    flex-basis: 100%;
  }
}
&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;products&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;short&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;long&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;long item 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;whatever&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;superlong sub 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;s 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/l&gt;
    &lt;li&gt;&lt;a href="#"&gt;go&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;on&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
I'd change the color scheme,  the colors are a retinal burning  :)   Also, it would make the colors easier to read.   Also you have the sub menu over to the left irregardless of what choice is selected.  I'm a fan of the choices being under the selection I mouse over myself.   Other than that, it looks good!