O menu dropdown criado nesse tutorial funcionará de forma semelhante a um select, tendo a vantagem de poder ser mais estilizado e ter o mesmo design em todos os browsers. Para isso, utilizaremos apenas HTML e CSS — não teremos uso de JavaScript.

Plano de Ações

1. Criar 2 imagens de 16×16 pixels.
2. Escrever o HTML.
3. Escrever o CSS.
4. Adicionar a classe dropdown para cada elemento que precise possuir essa funcionalidade.

Passo 1: Criar as Imagens

Abra o Photoshop, Ctrl+N para criar um novo arquivo. Especifique width e height iguais a 16 pixels e background transparente. Selecione a Pencil Tool (atalho: B), especifique 1 pixel de diâmetro e desenhe duas imagens como as abaixo:

Se preferir, faça download dos arquivos no final do tutorial e utilize as nossas imagens.

Passo 2: Escrever o HTML

Utilizaremos para o menu uma lista não ordenada <ul> e para o cabeçalho do menu, usaremos <li><span>Categorias</span>. Perceba que não fecharemos a tag <li>. Ela só deverá ser fechada depois de inserirmos outra lista <ul> contendo os links do nosso menu.

Nosso HTML deverá ficar assim:

	<ul class="dropdown">
		<li><span>Categorias</span>
			<ul>
				<li><a href="#">Geral</a></li>
				<li><a href="#">Downloads</a></li>
				<li><a href="#">Tutoriais</a></li>
				<li><a href="#">Artigos</a></li>
				<li><a href="#">Screencasts</a></li>
				<li><a href="#">Off-topic</a></li>
			</ul>
		</li>
	</ul>

Passo 3: Escrever o CSS

Devemos nos assegurar de que nossas listas dropdown não possuam qualquer margem, espaçamento ou estilo de listagem definido:

		.dropdown, .dropdown ul
			{
				list-style:none;
				padding:0;
				margin:0;
				position:absolute;
			}

Nosso elemento span é o cabeçalho do menu, sendo assim ele não poderá ser usado novamente em nosso dropdown. Segue seu CSS:

		.dropdown span
			{
				display:block;
				width:100px;
				border:1px solid #dedede;
				font-size:10px;
				line-height:24px;
				cursor:pointer;
				padding:0 20px 0 10px;
				text-transform:uppercase;
				background:#efefef url(small_arrow.gif) right center no-repeat;
				color:#333;
			}

		.dropdown:hover span
			{
				background-color:#444;
				border-color:#444;
				color:white;
				background-image:url(small_arrow_white.gif);
			}

Completa essa etapa, o cabeçalho do nosso menu deve estar assim:

Falta definirmos os estilos da nossa listagem de links:

		.dropdown ul
			{
				z-index:10; /* fará com que seja sobreposta aos outros elementos */
				width:200px;
				padding:4px 10px;
				margin-top:-1px;
				border:1px solid #444444;
				background-color:#eeeeee;
			}

		.dropdown ul li
			{
				padding:5px 0;
				text-transform:uppercase;
				line-height:normal;
				font-size:11px;
			}

		.dropdown a
			{
				color:#555;
				text-decoration:none;
			}

		.dropdown a:hover
			{
				color:#000;
			}

Completa essa etapa, nosso menu deve estar assim:

Agora precisamos implementar a abertura e fechamento do menu com o CSS. Para isso, adicione o seguinte código ao seu CSS:

		.dropdown:hover ul
			{
				visibility:visible;
			}

E deve adicionar visibility:hidden; ao seu .dropdown ul. Ele deverá ficar assim:

		.dropdown ul
			{
				visibility:hidden;  /* aparecerá invisível */
				z-index:10; /* fará com que seja sobreposta aos outros elementos */
				width:200px;
				padding:4px 10px;
				margin-top:-1px;
				border:1px solid #444444;
				background-color:#eeeeee;
			}

Agora nosso menu deve estar aparecendo dessa forma:

Código CSS Completo

Ao final de todas as etapas, seu CSS deverá estar como este:

		.dropdown, .dropdown ul
			{
				list-style:none;
				padding:0;
				margin:0;
				position:absolute;
			}

		.dropdown span
			{
				display:block;
				width:100px;
				border:1px solid #ccc;
				font-size:10px;
				line-height:24px;
				cursor:pointer;
				padding:0 20px 0 10px;
				text-transform:uppercase;
				background:#efefef url(small_arrow.gif) right center no-repeat;
				color:#333;
			}

		.dropdown:hover span
			{
				background-color:#444;
				border-color:#444;
				color:white;
				background-image:url(small_arrow_white.gif);
			}

		.dropdown ul
			{
				visibility:hidden;  /* aparecerá invisível */
				z-index:10; /* fará com que seja sobreposta aos outros elementos */
				width:200px;
				padding:4px 10px;
				margin-top:-1px;
				border:1px solid #444444;
				background-color:#eeeeee;
			}

		.dropdown ul li
			{
				padding:5px 0;
				text-transform:uppercase;
				line-height:normal;
				font-size:11px;
			}

		.dropdown a
			{
				color:#555;
				text-decoration:none;
			}

		.dropdown a:hover
			{
				color:#000;
			}

		.dropdown:hover ul
			{
				visibility:visible;
			}

The End & Download

Acabamos de escrever um menu dropdown apenas com HTML e CSS que funciona exatamente da mesma forma em todos os browsers.

Criando Menu Dropdown Apenas com HTML e CSS (1.32 KB, 241 clicks)