Exemplo-CSS-MENU-DROP-DOWN

•

ESTÁCIO

0

Robson Cabral Jr.

03.03.2015

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Tecnologias Web

5.989 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Arquivo: Menu.html 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
 <head> 
 <title>Menu Drop Down</title> 
 <link rel="stylesheet" type="text/css" href="stylesMenu.css"/> 
 </head> 
 <body> 
 <div class = "menu"> Menu <!--Serve para alterar o estilo em partes específicas 
da página e posicionar objetos --> 
 <a href="Exemp36-CSS-03-Conflito de estilo.html">Home</a> 
 <a href="#">News</a> 
 <a href="#">Articles</a> 
 <a href="#">Blog</a> 
 <a href="#">Contato</a> 
 </div> 
 </body> 
 </html> 
 
Arquivo: stylesMenu.css 
/* Folhas de estilo externo */ 
body {font-family: arial, sans-serif} 
div.menu {font-weight:bold; 
 color:white; 
 border: 2px solid #225599; 
 text-align: center; 
 width: 5cm; 
 background-color:#225599} 
div.menu:hover a {display: block} /* hover: muda o estilo do link quando o cursor passa sobre 
ele, neste caso ele esta sendo usado de uma 
 
 maneira mais avançada para fazer que apareça um menu quando o cursor do mouse 
passar sobre um botão opção*/ 
 /* display: permite que o 
programador decida se um elemento será ou não apresentado na página 
 block: exibe o elemento como 
um elemento de bloco 
 inline: exibe o elemento 
como um elemento em linha*/ 
div.menu a {display: none; 
 border-top: 2px solid #225599; 
 background-color: white; 
 width: 5cm; 
 text-decoration: none; 
 color: black} 
div.menu a:hover {background-color: #dfeeff}