@Renan you asked about the css ??
I will try to explain in a detailed way:
First you should notice that your code is inside a nav, okay you told the navigator semantically that here inside the nav will be your navigation session ok, soon after you put an ul and inside that ul, you put 5 li (s);
Explaining how you could style this in css;
Keep in mind that you begin to style the parent,
ul.menu {
list-style:none; //Repara, quero remover as bolinhas das li(s)
}
Now you'll stylize your links;
/*Configura todos os links do menu*/
ul.menu a {
text-decoration:none; //Quero remover o sublinhado da linha
color: #fff; //cor do link
display:block; //faz com que o elemento HTML seja renderizado como bloco, aqui acontece a magica;
}
/*Faz os <li>s ficarem na horizontal*/
ul.menu > li {
//Perceba que não quero estilizar todas as lis, somente as que são filhos direto da minha ul pai;
//Quero que as li(s) ficam deitadas ex:Home Contact AboutMe etc
float:left; //irão flutuar a esquerda
position:relative; //A posição relativa ao pai
}
Explanation about relative and absolute positioning of css
/*Configurar os links do menu principal*/
ul.menu > li > a {
position: relative;
padding: 20px;
margin: 0 5px;
}
/*Configurar o efeito ao clicar o mouse no link*/
ul.menu > li > a:active{
top: 3px;
left: 2px;
box-shadow: 0px -2px 0px #009900;
font-size: 12px;
width: 150px;
text-align: center;
}
/*Configurar o fundo do menu principal quando o mause passar em cima do meu link*/
ul.menu > li > a:hover{
background: #009900;
}
If you had within your li (s) another ul:
/*Mostrar o submenu no evento do mouse hover*/
ul.menu > li:hover > ul.submenu{
display: block;
}
The rest of the sub-menu settings are similar, so here you have the code, it will be easy to have the logic of how to build a drop down menu, it is connected that there are hundreds of ways to do this, the interesting thing would be you try to understand the selector, properties, values and how to declare themselves, how the css hierarchy works is not easy at first to get bored in this, but practice leads to perfection.
I hope I have helped in some way.
