Criando um menu horizontal usando Listas de Definição e CSS

<!– #menu-etapa2 ul { list-style-type: none; margin: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; text-align: center; background-image: url(http://www.marcusvbp.hpg.com.br/imagens/gradmenu_hover.jpg); background-repeat: repeat-x; } /**** etapa 3 ****/ <!– #menu-etapa3 ul { background-color: #E4E4E9; list-style-type: none; margin: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; text-align: center; } #menu-etapa3 ul li { display: inline; padding: 0px; height: 25px; } /**** etapa 4 *****/ #menu-etapa4 ul { list-style-type: none; margin: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; text-align: center; background-image: url(http://www.marcusvbp.hpg.com.br/imagens/gradmenu_hover.jpg); } #menu-etapa4 ul li { display: inline; padding: 0px; height: 25px; } #menu-etapa4 ul li a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; text-decoration: none; margin: 0px; height: 19px; padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; } /***** etapa 5 ****/ #menu-etapa5 ul { list-style-type: none; margin: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; text-align: center; background-image: url(http://www.marcusvbp.hpg.com.br/imagens/gradmenu_hover.jpg); background-repeat: repeat-x; } #menu-etapa5 ul li { display: inline; padding: 0px; height: 25px; } #menu-etapa5 ul li a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; text-decoration: none; margin: 0px; height: 19px; padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; } #menu-etapa5 ul li a:hover { color: #FF0000; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFFFFF; border-right-color: #C6C5D3; border-bottom-color: #545478; border-left-color: #F1F1F5; padding-right: 4px; padding-left: 4px; } –>

Olá a todos. Como tinha prometido, apresento aqui o segundo tutorial para a criação de menus usando CSS e listas de definição. Bom proveito.

1 – Crie uma div e a identifique como “menu”. dentro dessa div crie uma lista contendo os links:

Código dessa etapa:

<div id="menu-etapa1">

 <ul>

 <li><a href="#">Home</a></li>

 <li><a href="#">Quem Somos</a></li>

 <li><a href="#">Produtos</a></li>

 <li><a href="#">Ache a Gente</a></li>

 <li><a href="#">Fale Conosco</a></li>

 </ul>

 </div>

2 – Vamos começar a formatação. Crie a seguinte folha de estilo:



#menu-etapa2 ul {

	background-image: url(imagens/gradmenu_hover.jpg);

	background-repeat: repeat-x;

	list-style-type: none;

	margin: 0px;

	padding-top: 4px;

	padding-right: 0px;

	padding-bottom: 4px;

	padding-left: 0px;

	text-align: center;

}

Resultado dessa etapa:

3 – Agora, vamos criar os estilos da tag li:

#menu ul li {

 display: inline;

 padding: 0px;

 height: 25px;

 }

Nosso menu começa a tomar forma.

4 – formatação os links:

#menu ul li a {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;	color: #666666;	text-decoration: none;	margin: 0px;	height: 19px;	padding-top: 3px;	padding-right: 5px;	padding-bottom: 3px;	padding-left: 5px;}

5 – Estilo do link – estado Hover:

#menu ul li a:hover {	color: #FF0000;	border-top-width: 1px;	border-right-width: 1px;	border-bottom-width: 1px;	border-left-width: 1px;	border-top-style: solid;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-top-color: #FFFFFF;	border-right-color: #C6C5D3;	border-bottom-color: #545478;	border-left-color: #F1F1F5;	padding-right: 4px;	padding-left: 4px;}

O Tutorial está completo. o CSS completo é:

#menu ul {	list-style-type: none;	margin: 0px;	padding-top: 4px;	padding-right: 0px;	padding-bottom: 4px;	padding-left: 0px;	text-align: center;	background-image: url(imagens/gradmenu_hover.jpg);	background-repeat: repeat-x;}#menu ul li {	display: inline;	padding: 0px;	height: 25px;}#menu ul li a {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;	color: #666666;	text-decoration: none;	margin: 0px;	height: 19px;	padding-top: 3px;	padding-right: 5px;	padding-bottom: 3px;	padding-left: 5px;}#menu ul li a:hover {	color: #FF0000;	border-top-width: 1px;	border-right-width: 1px;	border-bottom-width: 1px;	border-left-width: 1px;	border-top-style: solid;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-top-color: #FFFFFF;	border-right-color: #C6C5D3;	border-bottom-color: #545478;	border-left-color: #F1F1F5;	padding-right: 4px;	padding-left: 4px;}

Qualquer dúvida, basta me mandar um e-mail.

T+

Marcus VBP