Menu s com CSS

CSS - Style Sheet

Professor: Jolvani
Aula 32

Menu s com CSS

Anteriormente construmos 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.

Menu s com CSS

Como no usaremos jQuery a primeira coisa a fazer remover as

referncias javascripts dos efeitos nos menus:

Salvamos
a
aula
menu22e23menuVertical.html
aula32_menucomCSS.html, e removemos as referncias ...

Vc ir notar que todos os submenus

sero apresentados a partir desse

momento.

para

Menu s com CSS

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

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 usurio
display:block;

Prxima Aula: CSS Sprite