Menu DropDown em CSS puro

Primeiro “fast post” do blog, vou postar o código de um menu drop down implementado apenas com CSS. Qual a vantagem disso? Você não precisa recorrer ao jQuery se quiser fazer um menu relativamente simples. O jQuery oferece muitos recursos para o desenvolvimento web, mas se você usar muitas bibliotecas pode ocorrer alguns conflitos entre elas. Se o caso for apenas um menu sem muito efeito então este exemplo pode servir.

estilo.css


#div_menu {
 width:100%;
 height:40px;
 float:left;
}
#div_menu ul li .submenu {
 display:none;
 background-color:#06F;
 font-family:Verdana, Geneva, sans-serif;
 font-size:18px;
 float:left;
 position:relative;
 margin-top:12px;
 margin-left:-4px;
}
#div_menu ul li:hover .submenu {
 display:block;
 z-index:2;
}

#div_menu ul {
 padding:0;
 margin:0;
 text-align:center;
}

#div_menu ul li {
 text-align:center;
 font-family:Verdana, Geneva, sans-serif;
 font-size:18px;
 background-color:#06F;
 display:inline;
 list-style:none;
 float:left;
 margin:0;
 width:150px;
 height:40px;

 padding-top:6px;
 border-left:4px solid #06F;
 border-right:4px solid #06F;

 text-decoration:none;
 color:#FFF
}

#div_menu ul a {
 text-align:center;
 text-decoration:none;
 color:#FFF;
}
#div_menu ul li:hover {
 background-color:#0CF;
 border-left:4px solid #03C;
 border-right:4px solid #FFF;
}

menu.html


<link rel="stylesheet" href="estilo.css" /> <!-- colocar dentro do head -->

<div id="div_menu">
 <ul>
 <a href="index.html"><li>Home</li></a>
 <li>Menu 1 ↓
    <ul>
      <a href="#"><li>item 1</li></a>
      <a href="#"><li>item 2</li></a>
      <a href="#"><li>item 3</li></a>
      <a href="#"><li>item 4</li></a>
      <a href="#"><li>item 5</li></a>
      <a href="#"><li>item 6</li></a>
    </ul>
 </li>
 <li>Menu 2 ↓
    <ul>
      <a href="#"><li>item 1</li></a>
      <a href="#"><li>item 2</li></a>
      <a href="#"><li>item 3</li></a>
    </ul>
 </li>
 </ul>
 </div>

No comments yet

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: