Poziome rozwijane menu ul - prosty problem

Question

Mam prosty problem ze stworzeniem rozwijanego menu ul. Dlaczego pierwsze menu ul przeniosło się na dół strony zamiast pozostać na górze?

Kod:

https://jsfiddle.net/qn7z1oqk/

Answer 1

Ponieważ trzecia opcja menu musi pomieścić 5 bloków z tekstem a więc <ul class="main"> rozciąga się tak by wszystkie pomieścić automatycznie dopasowując wysokość pozostałych opcji. Jeżeli chcesz mieć wszystkie opcje na jednym poziomie możesz ustalić stałą wysokość elementów li listy main lub zastosować vertical align

 nav .main li {
    display: inline-block;
    vertical-align: top;
}