Horizontal mega menu with flexbox

Question

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%;
 }
}

<nav>
 <ul>
 <li><a href="#">home</a></li>
 <li><a href="#">products</a>
 <ul>
 <li><a href="#">short</a>
 <ul>
 <li><a href="#">long</a></li>
 </ul>
 </li>
 <li><a href="#">item 1</a>
 <ul>
 <li><a href="#">long item 2</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#">whatever</a>
 <ul>
 <li><a href="#">superlong sub 1</a></li>
 <li><a href="#">s 2</a></li>
 </ul>
 </l>
 <li><a href="#">go</a></li>
 <li><a href="#">on</a></li>
 </ul>
</nav>

• Zeta: Welcome to Code Review. At least for me, a "mega menu" is a foreign term. Can you add a link to some external resources or---even better---describe in your own words what you intended to create? Thanks! (Keep in mind that you don't need to add "Update" or "Edit" to your edits; every post on Code Review has a revision log).
• mnewmedia: @Zeta Thanks for the welcome. I tried to describe it in my own words. But I thought the term "mega menu" is quite common when talking about css menus.

Answer 1

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!

• mnewmedia: the color's where just for development =) I tried to just make it as basic as possible and focus on functionality. will think about the choices under the selection. Thanks!