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>

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!