segunda-feira, 12 de dezembro de 2011

0

Menu horizontal HTML com CSS

Esse é um menu horizontal  HTML com CSS.O menu vai ficar no topo da página.

Copie o código abaixo


#menu ul {
padding:0px;
margin:0px;
float: left;
width: 100%;
background-color:#EDEDED;
list-style:none;
font:80% Tahoma;
}

#menu ul li { display: inline; }

#menu ul li a {
background-color:#EDEDED;
color: #333;
text-decoration: none;
border-bottom:3px solid #EDEDED;
padding: 2px 10px;
float:left;
}

#menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #EA0000;
}


Cole entre as tag  <head> </head> da sua página

Nota

Se for instalar no blogger, exclua a linha <style type="text/css">  e cole o código antes da tag
]]></b:skin>

Agora copie o código abaixo

<div id="menu">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Sobre</a></li>
   <li><a href="#">Artigos</a></li>
   <li><a href="#">Estudos</a></li>
   <li><a href="#">Diretório</a></li>
   <li><a href="#">CURSO</a></li>
   <li><a href="#">Links</a></li>
   <li><a href="#">Contato</a></li>
  </ul>
 </div>

Para alterar os itens do menu, basta inserir, modificar ou excluir as linhas com a tag li na div id=menu.
Cole depois da tag <body> da sua página
Depois salve e pronto!


0 comentários:

Postar um comentário