Codelic Hackers
Estamos voltando

SubMenu Horizontal em css (simples)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

SubMenu Horizontal em css (simples)

Mensagem por Cdubb em Seg Dez 13, 2010 7:58 pm

Olá galera!

Bom fiz um submenu simples em css vou ensinar como add na sua pagina.

Primeiro passo é criar um arquivo chamado style.css depois cole esses codigos
Código:
* {
   margin: 0px;
   padding: 0px;
}
body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
}
#submenu li ul a {
   width: 130px;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #FFFFFF;
}
ul {
   list-style-type: none;
}
#submenu {
   width: 800px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
}
#submenu li {
   float: left;
   position: relative;
}
#submenu li a {
   display: block;
   float: left;
   height: 30px;
   padding: 0px 15px;
   line-height: 30px;
   background-color: #003333;
   color: #FFFFFF;
   text-decoration: none;
}
#submenu li a:hover {
   color: #000000;
   background-color: #CCCCCC;
}
#submenu li ul {
   display: none;
   position: absolute;
   top:30px;
   left:0
}
#submenu li:hover ul {
   display: block;
}

Segundo passo é criar um arquivo chamado index.html e colar os seguintes codigos
Código:
<ul id=submenu>
      <li><a href="#" title="Início">Início</a></li>
      <li><a href="#" title="Registre-se agora!"><blink>Registrar-se</blink></a></li>
      <li><a href="#" title="Alterar dados">Alterar senha</a></li>
      <li><a href="#" title="Top ranking">Ranking</a>
        <ul>
          <li><a href="#" title="Top Nível">Top Nível</a></li>
        <li><a href="#" title="Top Guildas">Top Guildas</a></li>
        </ul>
        </li>
      <li><a href="#" title="Atualize seu cliente">Download</a>
        <ul>
          <li><a href="#" title="Cliente">Cliente</a></li>
        <li><a href="#" title="Patchs">Patchs</a></li>
        </ul>
        </li>
      <li><a href="#" title="Converse conosco">Bate-papo</a></li>
      <li><a href="#" title="Seja nosso parceiro">Parceria</a></li>
      <li><a href="#" title="Fale conosco">Contato</a></li>
      </ul>


Qualquer dúvida so posta um comentário.
Funcionando 100% feito por mim.

Autor Junior Ferraz

_________________________________________________


Sing






Cdubb
Admin
Admin

Mensagens : 1262
Data de inscrição : 06/05/2010
Idade : 25
Especialidade : TQ Binary, Web Sites, Desing, Photo Shop

http://www.orkut.com.br/Main#Community?cmm=103811536

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum