Este documento descreve como criar um menu vertical usando apenas CSS ao invés de jQuery. Primeiro, as referências a jQuery são removidas e os submenus aparecem todos de uma vez. Em seguida, a propriedade display: none esconde os submenus e li:hover > ul{display:block} faz com que os submenus apareçam ao passar o mouse por cima dos itens do menu.

1. Menu só com CSS
CSS - Style Sheet
Professor: Jolvani
Aula 32

2. Menu só com CSS
 Anteriormente construímos esse menu com o uso da biblioteca jQuery
para trazer o efeito de abrir e esconder o elementos do menu dentro de
nossa lista.
 Nesta aula iremos usar o mesmo efeito usando
Somente recursos CSS.

3.  Como não usaremos jQuery a primeira coisa a fazer é remover as
referências javascripts dos efeitos nos menus:
 Salvamos a aula menu22e23menuVertical.html para
aula32_menucomCSS.html, e removemos as referências ...
 Vc irá notar que todos os submenus
serão apresentados a partir desse
momento.
Menu só com CSS

4.  Como podemos esconder os submenus? Dentro do CSS que estiliza o submenu
devemos utilizar a propriedade display com o valor none.
 Essa propriedade irá esconder todos os submenus... (teste)
 Agora precisamos apresentar o submenu...
 Devemos usar o evento hover para que quando
passarmos o mouse por cima do menu seja
apresentado o submenu. Alterando o elemento
Interno da li. Ficando assim:
li:hover > ul{
}
Menu só com CSS

5.  Devemos usar o evento hover para que quando
passarmos o mouse por cima do menu seja
apresentado o submenu. Alterando o elemento
Interno da li. Ficando assim:
li:hover > ul{
}
Apresentando para o usuário
display:block;
Menu só com CSS

6. Próxima Aula: CSS Sprite