Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala galera!
Vendo que não tinha nenhum post sobre Menu PullDown CSS aqui no fórum, estou postando este simples;
Arquivo CSS:
div.pdmenu { margin: 0; padding: 0; text-align: center; }
div.pdmenu li { width: 120px; height: 30px; margin: 0 -1px 0 0; padding: 0; float: left; display: block; cursor: pointer; line-height: 30px; list-style: none; border: 1px solid #000; }
div.pdmenu a { height: 30px; padding: 0; color:#000; display: block; line-height: 30px; text-decoration: none; }
div.pdmenu li ul { padding: 0; display: none; }
div.pdmenu li:hover ul { width: 120px; margin: 0 0 0 -1px; padding: 0; display: block; }
div.pdmenu li ul li a:hover { background: #999; }
HTML:
<div class="pdmenu">
<ul>
<li>Arquivo
<ul>
<li><a href="#">Novo</a></li>
<li><a href="#">Abrir</a></li>
<li><a href="#">Fechar</a></li>
<li><a href="#">Salvar</a></li>
<li><a href="#">Salvar Como</a></li>
<li><a href="#">Sair</a></li>
</ul>
</li>
<li>Editar
<ul>
<li><a href="#">Voltar</a></li>
<li><a href="#">Avançar</a></li>
<li><a href="#">Recortar</a></li>
<li><a href="#">Copiar</a></li>
<li><a href="#">Colar</a></li>
<li><a href="#">Selecionar</a></li>
</ul>
</li>
<li>Visualizar
<ul>
<li><a href="#">Codigo</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Informações</a></li>
<li><a href="#">Outros</a></li>
</ul>
</li>
<li>Modificar
<ul>
<li><a href="#">Propriedades</a></li>
<li><a href="#"><span class="caps"><abbr class="uttInitialism" title="Cascading Style Sheets">CSS</abbr></span></a></li>
<li><a href="#">Display</a></li>
<li><a href="#">Meta-Tags</a></li>
</ul>
</li>
<li>Ajuda
<ul>
<li><a href="#">Conteudo</a></li>
<li><a href="#">Notas</a></li>
<li><a href="#"><span class="caps"><abbr class="uttInitialism" title="Cascading Style Sheets">CSS</abbr> </span>Info</a></li>
<li><script src="[http://www.uoguelph.ca/~stuartr/includes/email.js"](http://www.uoguelph.ca/~stuartr/includes/email.js) type="text/JavaScript"></script></li>
</ul>
</li>
</ul>
</div>
Exemplo Online:
http://scripts.logmania.net/webstandards/menu_pulldown.html
Fonte:
http://www.designmeme.com/articles/csspulldownmenus/
Qualquer dúvida é só postar
abssss []'s
Carregando comentários...