Title: Menu dropdown
Last modified: 6 agosto, 2016

---

# Menu dropdown

 *  Resolvido [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [14 anos, 2 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/)
 * Gostaria de criar um menu dropdown como na imagem abaixo mas não sei nem por 
   onde começar, alguem teria conhecimento para me ajudar?
 * [http://s14.postimage.org/qgsq2d6y9/menu.jpg](http://s14.postimage.org/qgsq2d6y9/menu.jpg)

Visualizando 7 respostas - 16 até 22 (de um total de 22)

[←](https://br.wordpress.org/support/topic/menu-dropdown-1/?output_format=md) [1](https://br.wordpress.org/support/topic/menu-dropdown-1/?output_format=md)
2

 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [14 anos, 2 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/page/2/#post-23609)
 * Então o que mais lhe chama interessa é o efeito do menu?
 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [14 anos, 2 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/page/2/#post-23610)
 * Para fazer o os sub-itens do menu “descer” com aquele efeito eu acho que seria
   preciso mudar os códigos do menu no header.php também!
 *  Criador do tópico [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [14 anos, 2 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/page/2/#post-23611)
 * Então, queria colocar esse efeito e essas bordas do retangulo que aparece quando
   passa o mouse sobre.
 * É bem parecido com esse que você criou, só mudar alguns detalhes (acho).
 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [14 anos, 2 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/page/2/#post-23612)
 * Sim, deixar ele igual ao que você quer é facil, o dificil é fazer o spam em wordpress
   pro menu descer com aquele efeitinho ali 🙁
 *  Criador do tópico [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [14 anos, 2 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/page/2/#post-23615)
 * Então deixa sem o efeito mesmo, quando colocar no ar tento fazer um com o efeito.
 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [14 anos, 2 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/page/2/#post-23622)
 * Então, acredito que seja isso:
 *     ```
       /* =Menu
       -------------------------------------------------------------- */
   
       #access {
       	background: #FFF;
       	display: block;
       	float: left;
       	margin: 0 auto;
       	width: 940px;
       	margin-bottom: 3px;
       	margin-top: 3px;
       }
       #access .menu-header,
       div.menu {
       	font-size: 13px;
       	margin-left: 12px;
       	width: 928px;
       }
       #access .menu-header ul,
       div.menu ul {
       	list-style: none;
       	margin: 0;
       }
       #access .menu-header li,
       div.menu li {
       	float: left;
       	position: relative;
       }
       #access a {
       	color: #333;
       	display: block;
       	line-height: 38px;
       	padding: 0 10px;
       	text-decoration: none;
       }
       #access ul ul {
       	border:medium #006;
       	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
       	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
       	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
       	display: none;
       	position: absolute;
       	top: 38px;
       	left: 0;
       	float: left;
       	width: 200px;
       	z-index: 99999;
       }
       #access ul ul li {
       	min-width: 180px;
       }
       #access ul ul ul {
       	left: 100%;
       	top: 0;
       }
       #access ul ul {
       	margin-top: 6px !important;
       	background: #FFF;
       	line-height: 1em;
       	padding: 10px;
       	width: 180px;
       	height: auto;
       	-moz-border-radius: 10px; /* Para Firefox */
       	-webkit-border-radius: 10px; /*Para Safari e Chrome */
       	border-radius: 10px; /* Para Opera 10.5+*/
       	overflow:hidden;
       	border: 1px solid #ddd;
       }
       #access ul ul a {
       	background: #FFF;
       	line-height: 1em;
       	padding: 10px;
       	height: auto;
       	border-bottom: 1px solid #ddd !important;
       	-moz-border-radius: 0px; /* Para Firefox */
       	-webkit-border-radius: 0px; /*Para Safari e Chrome */
       	border-radius: 0px; /* Para Opera 10.5+*/
       }
   
       #access li a{
       	background: none;
       	color: #333;
       	border: 1px solid #fff;
       	-moz-border-radius: 10px; /* Para Firefox */
       	-webkit-border-radius: 10px; /*Para Safari e Chrome */
       	border-radius: 10px; /* Para Opera 10.5+*/
       	}
   
       #access li a:hover {
       	background: #eee;
       	color: #333;
       	border: 1px solid #ddd;
       	-moz-border-radius: 10px; /* Para Firefox */
       	-webkit-border-radius: 10px; /*Para Safari e Chrome */
       	border-radius: 10px; /* Para Opera 10.5+*/
       	}	
   
       #access ul ul :hover > a {
       	background: #FFF;
       	color:#E25534;
       	line-height: 1em;
       	padding: 10px;
       	height: auto;
       	border-color:#FFF;
       	border-bottom: 1px solid #ddd !important;
       	-moz-border-radius: 0px; /* Para Firefox */
       	-webkit-border-radius: 0px; /*Para Safari e Chrome */
       	border-radius: 0px; /* Para Opera 10.5+*/
       	}
       #access ul li:hover > ul {
       	display: block;
       }
       #access ul li.current_page_item > a,
       #access ul li.current-menu-ancestor > a,
       #access ul li.current-menu-item > a,
       #access ul li.current-menu-parent > a {
       	background: #eee;
       	color: #333;
       	border: 1px solid #ddd;
       	-moz-border-radius: 10px; /* Para Firefox */
       	-webkit-border-radius: 10px; /*Para Safari e Chrome */
       	border-radius: 10px; /* Para Opera 10.5+*/
       }
       * html #access ul li.current_page_item a,
       * html #access ul li.current-menu-ancestor a,
       * html #access ul li.current-menu-item a,
       * html #access ul li.current-menu-parent a,
       * html #access ul li a:hover {
       	color: #333;
       }
   
       /* =Content
       -------------------------------------------------------------- */
       ```
   
 * Qualquer problema ou dúvida, é só chamar!!
    😀
 *  Criador do tópico [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [14 anos, 2 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/page/2/#post-23632)
 * É isso mesmo que eu preciso, obrigado pela ajuda.

Visualizando 7 respostas - 16 até 22 (de um total de 22)

[←](https://br.wordpress.org/support/topic/menu-dropdown-1/?output_format=md) [1](https://br.wordpress.org/support/topic/menu-dropdown-1/?output_format=md)
2

 O tópico ‘Menu dropdown’ está fechado para novas respostas.

## Tags

 * [css](https://br.wordpress.org/support/topic-tag/css/)
 * [menu](https://br.wordpress.org/support/topic-tag/menu/)

 * Em: [Temas](https://br.wordpress.org/support/forum/temas-e-modelos/)
 * 22 respostas
 * 2 participantes
 * Última resposta de: [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * Última atividade: [14 anos, 2 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/page/2/#post-23632)
 * Estado: resolvido

## Tópicos

### Tópicos mais populares

### Tópicos sem respostas

### Tópicos não relacionados a suporte

### Tópicos resolvidos

### Tópicos não resolvidos

### Todos os tópicos