Title: Menu dropdown
Last modified: 6 agosto, 2016

---

# Menu dropdown

 *  Resolvido [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [13 anos, 9 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 15 respostas - 1 até 15 (de um total de 22)

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

 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23592)
 * Isso é CSS puro!! (olha eu aqui de novo)
    Você está usando o Twenty né? Então
   os menus já são dropdown você só precisa ajeitar o style!
 *  Criador do tópico [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23593)
 * Esse é o problema, fazer menu em css é o que eu não sei fazer, peguei o código
   desse menu e ele esta interligado em varios arquivos. Ai fica complicado de entender
   como funciona, por isso queria alguma ajuda para deixar desse jeito ai.
 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23594)
 * Bem, então eu precisaria dos códigos dos dois menus, (original e o que você quer
   colocar).
 *  Criador do tópico [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23595)
 * O original
 *     ```
       /* =Menu
       -------------------------------------------------------------- */
   
       #access {
       	background: #1b1b1b;
       	display: block;
       	float: left;
       	margin: 0 auto;
       	width: 960px;
       	height:41px;
       }
       #access .menu-header,
       div.menu {
       	font-size: 15px;
       	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: #aaa;
       	display: block;
       	line-height: 38px;
       	padding: 0 10px;
       	text-decoration: none;
       }
       #access ul ul {
       	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: 180px;
       	z-index: 99999;
       }
       #access ul ul li {
       	min-width: 180px;
       }
       #access ul ul ul {
       	left: 100%;
       	top: 0;
       }
       #access ul ul a {
       	background: #333;
       	line-height: 1em;
       	padding: 10px;
       	width: 160px;
       	height: auto;
       }
       #access li:hover > a,
       #access ul ul :hover > a {
       	background: #333;
       	color: #fff;
       }
       #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 {
       	color: #fff;
       }
       * 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: #fff;
       }
       ```
   
 *  Criador do tópico [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23596)
 * o outro:
 *     ```
       /* Menu Helpers
       ----------------------------------------------------------------------------------------------------*/
   
       .menu,
       .menu ul {
       	margin: 0px;
       	padding: 0px;
       	list-style: none;
       }
   
       .menu a,
       .menu span { display: block; }
       .menu a { text-decoration: none; }
   
       /* Mega Drop-Down Menu
       ----------------------------------------------------------------------------------------------------*/
   
       .menu-dropdown li { position: relative; }
   
       /* Level 1 */
       .menu-dropdown,
       .menu-dropdown .level1,
       .menu-dropdown .level1 > span { float: left; }
   
       .menu-dropdown a.level1 > span,
       .menu-dropdown span.level1 > span {
       	height: 35px;
       	padding: 0 10px;
       	line-height: 35px;
       }
   
       /* Drop-Down */
       .menu-dropdown .dropdown {
       	display: none;
       	position: absolute;
       	top: 35px;
        	left: 0;
       	z-index: 100;
       	width: 300px; /* Default */
       }
   
       .menu-dropdown li:hover .dropdown,
       .menu-dropdown li.remain .dropdown { display: block; }
   
       .menu-dropdown .dropdown-bg > div { overflow: hidden; }
   
       /* Multi Columns, Default */
       .menu-dropdown .columns2 { width: 600px; }
       .menu-dropdown .columns3 { width: 900px; }
       .menu-dropdown .columns4 { width: 1200px; }
   
       .menu-dropdown .column { float: left; }
   
       /* Level 2 */
       .menu-dropdown a.level2 > span,
       .menu-dropdown span.level2 > span {
       	padding: 7px 0;
       	line-height: 21px;
       	overflow: hidden;
       }
   
       /* Level 3 */
       .menu-dropdown ul.level3 { padding-bottom: 10px; }
   
       .menu-dropdown li.level3 { /* Must be set in li for IE7 */
       	font-size: 11px;
       	line-height: 17px;
       }
   
       /* Icons */
       .menu-dropdown span.icon {
       	display: block;
       	width: 35px;
       	height: 35px;
       	background-repeat: no-repeat;
       	background-position: 50% 50%;
       	float: left;
       }
   
       .menu-dropdown span.icon + span,
       .menu-dropdown span.icon + span + span { margin-left: 35px; }
   
       .menu-dropdown li.level2 .level2 span.icon {
       	margin-top: -7px;
       	margin-bottom: -7px;
       }
       .menu-dropdown li.level2.hassubtitle .level2 span.icon { margin-top: -2px; }
   
       /* Subtitles */
       .menu-dropdown span.title { line-height: 21px; }
   
       .menu-dropdown span.subtitle {
       	margin-top: -1px;
       	font-size: 9px;
       	line-height: 10px;
       	text-indent: 1px;
       }
   
       /* Sidebar/Accordion Menu
       ----------------------------------------------------------------------------------------------------*/
   
       /* Accordion */
       .menu-sidebar li.parent span.level1 > span { cursor: pointer; }
   
       /* Level 1 */
       .menu-sidebar a.level1 > span,
       .menu-sidebar span.level1 > span {
       	padding: 5px 0;
       	line-height: 20px;
       }
   
       /* Remove Subtitles */
       .menu-sidebar span.title { display: inline; }
       .menu-sidebar span.subtitle { display: none; }
   
       /* Level 2-4 */
       .menu-sidebar ul.level2 { padding-bottom: 10px; }
       .menu-sidebar li.level1:last-child ul.level2 { padding-bottom: 0; }
   
       .menu-sidebar .level2 a > span {
       	font-size: 11px;
       	line-height: 17px;
       }
   
       /* Icons */
       .menu-sidebar span.icon {
       	display: inline-block;
       	height: 30px;
       	width: 30px;
       	margin: -5px 0;
       	background-repeat: no-repeat;
       	background-position: 50% 50%;
       	vertical-align: middle;
       }
   
       /* Line Menu
       ----------------------------------------------------------------------------------------------------*/
   
       /* Level 1 */
       .menu-line,
       .menu-line li,
       .menu-line li a { display: inline-block; }
       ```
   
 *     ```
       @import url(../css/menus.css);
   
       /* Mega Drop-Down Menu
       ----------------------------------------------------------------------------------------------------*/
   
       /* Level 1 */
       .menu-dropdown { margin-bottom: -11px; }
   
       .menu-dropdown li.level1 {
       	margin-right: 10px;
       	padding-bottom: 11px;
       }
   
       .menu-dropdown a.level1,
       .menu-dropdown span.level1 { color: #777; }
   
       .menu-dropdown a.level1 > span,
       .menu-dropdown span.level1 > span {
       	height: 30px;
       	line-height: 30px;
       }
   
       /* Set Hover and Active */
       .menu-dropdown li.level1:hover .level1,
       .menu-dropdown li.remain .level1,
       .menu-dropdown li.active .level1 { color: #444; }
   
       /* Drop-Down */
       .menu-dropdown .dropdown {
       	top: 43px;
       	border-top: 1px solid #DDD;
       }
   
       .menu-dropdown .dropdown-bg > div {
       	padding: 5px;
       	border: 1px solid #DDD;
       	border-top: none;
       	background: #fff;
       }
   
       /* Level 2 */
       .menu-dropdown li.level2 {
       	margin: 0 5px;
       	border-top: 1px solid #ddd;
       }
       .menu-dropdown li.level2:first-child { border: none; }
   
       .menu-dropdown a.level2,
       .menu-dropdown span.level2 { color: #444; }
   
       /* Set Hover */
       .menu-dropdown a.level2:hover { color: #d50; }
   
       /* Set Current */
       .menu-dropdown a.current.level2 { font-weight: bold; } 
   
       /* Level 3 */
       .menu-dropdown a.level3 > span,
       .menu-dropdown span.level3 > span {
       	padding-left: 15px;
       	background: url(../images/menu_dropdown_level3.png) 0 50% no-repeat;
       }
   
       /* Set Hover */
       .menu-dropdown a.level3:hover { color: #d50; }
   
       /* Set Current */
       .menu-dropdown a.current.level3 { font-weight: bold; } 
   
       /* Icons */
       .menu-dropdown .level1 .level1 span.icon {
       	width: 30px;
       	height: 30px;
       	margin-left: -5px;
       }
       .menu-dropdown .level1 .level1 span.icon + span,
       .menu-dropdown .level1 .level1 span.icon + span + span { margin-left: 25px; }
   
       .menu-dropdown li.level2 .level2 span.icon { margin-right: 4px; }
   
       .menu-dropdown li.level2 .level2 span.icon + span,
       .menu-dropdown li.level2 .level2 span.icon + span + span { margin-left: 39px; }
   
       /* Subtitles */
       .menu-dropdown .level1 .level1 span.title { line-height: 18px; }
       .menu-dropdown .level1 .level1 span.subtitle { margin-top: -1px; }
   
       /* Sidebar/Accordion Menu
       ----------------------------------------------------------------------------------------------------*/
   
       /* Link */
       .menu-sidebar a,
       .menu-sidebar li > span { color: #444; }
   
       /* Hover */
       .menu-sidebar a:hover,
       .menu-sidebar li > span:hover { color: #d50; }
   
       /* Current */
       .menu-sidebar a.current { font-weight: bold; }
   
       /* Level 1 */
       .menu-sidebar li.level1 { border-top: 1px solid #ddd; }
       .menu-sidebar li.level1:first-child { border-top: none; }
   
       .menu-sidebar li.parent .level1 > span { background: url(../images/menu_sidebar_parent.png) 100% 0 no-repeat; }
       .menu-sidebar li.parent.active .level1 > span { background-position: 100% -100px; }
   
       /* Level 2-4 */
       .menu-sidebar ul.level2 ul { padding-left: 10px; }
   
       /* Icons */
       .menu-sidebar span.icon { margin-right: 4px; }
   
       /* Line Menu
       ----------------------------------------------------------------------------------------------------*/
   
       .menu-line li {
       	margin-left: 7px;
       	padding-left: 8px;
       	background: url(../images/menu_line_item.png) 0 50% no-repeat;
       }
   
       .menu-line li:first-child {
       	margin-left: 0;
       	padding-left: 0;
       	background: none;
       }
       ```
   
 *  Criador do tópico [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23597)
 * Será que tem como fazer?
 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23598)
 * Esse menu ai é bem complexo em, acho que dá pra fazer de uma maneira mais simples
   o mesmo efeito da imagem que você passou no link!
 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23599)
 * Você tem muita pressa?
 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23600)
 * Claro que dá, tudo é possível! hehehe
 *  Criador do tópico [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23601)
 * È que comecei a fazer o template em uma semana, e o detalhe que falta no layout
   é só esse menu.
    Assim que fazer ele ja vou colocar o site no ar. Queria colocar
   essa semana que esta chegando, mas esse menu ai esta dando trabalho.
 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23602)
 * Ah sim, eu vou te ajudar. É que no momento eu to em horario de trabalho, hehehe…
   mas fique tranquilo, não acho que vá ser muito dificil!
 *  Criador do tópico [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23603)
 * Ok, obrigado pela ajuda.
 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23605)
 * Substitua todo o código original por este:
 *     ```
       /* =Menu
       -------------------------------------------------------------- */
   
       #access {
       	background: #FFF;
       	display: block;
       	float: left;
       	margin: 0 auto;
       	width: 940px;
       }
       #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: 1px !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 #666666;
       }
       #access ul ul a {
       	background: #FFF;
       	line-height: 1em;
       	padding: 10px;
       	height: auto;
       	border: 3px #0000CC !important;
       border-bottom: 1px solid #666666 !important;
       }
   
       #access li:hover > a,
       #access ul ul :hover > a {
       	background: #CECEFF;
       	color: #333;
       	border: 1px solid #8484FF;
       	-moz-border-radius: 10px; /* Para Firefox */
       -webkit-border-radius: 10px; /*Para Safari e Chrome */
       border-radius: 10px; /* 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 {
       	color: #333;
       }
       * 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
       -------------------------------------------------------------- */
       ```
   
 *  [Paula Bonot](https://br.wordpress.org/support/users/p-bonot/)
 * (@p-bonot)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23606)
 * Veja se é mais ou menos isso, e post aqui! 😀
 *  Criador do tópico [Williamhm](https://br.wordpress.org/support/users/williamhm/)
 * (@williamhm)
 * [13 anos, 9 meses atrás](https://br.wordpress.org/support/topic/menu-dropdown-1/#post-23608)
 * Quase isso, vou te passar o site com esse menu pra você dar uma olhada.
 * [http://www.yootheme.com/demo/themes/wordpress/2011/nano](http://www.yootheme.com/demo/themes/wordpress/2011/nano)

Visualizando 15 respostas - 1 até 15 (de um total de 22)

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

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: [13 anos, 9 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