Horizontal Menu - CSS

Question

I’m trying to learn how to work with horizontal CSS menus. I am starting and therefore I am with a silly doubt and I did not find anything on the internet similar to my question (Maybe I do not know the correct terms for the problem).

My problem is that all my sub-menus are lining up under the first element of the main menu. I put here in the JSFIDDLE the HTML and CSS I made.

I hope someone can help me.

Answer 1

I did not understand correctly why (I also did not look), but need to float the menus "parents":

.menu > ul > li {
    float:left;        /* <- Adicione essa propriedade */
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

Jsfiddler