[Resolvido] Menu dropdown cortando.

Lyncoln Nellucci · Agosto 1, 2012

Boa tarde!

Ja vasculhei todos os cantos dessa internet em busca de uma soluçao para o meu problema hahaha.

Seguinte galera,

Temos a seguinte situação.

Tenho 2 divs, a primeira com o menu e a segunda com o banner

ambas, com um class="wrap", que em toda div que seria um container, eu coloco esse class para que a div fique centralizada e com height automatico.

Dito isso, temos ai o nosso amigo menu dropdown.

Ele está dentro de uma outra div chamada menu2 que tem um height="50px" ai tem margin... padding... vai.. no fim, essa div ganha ai uns 100px de height total.

Eis o problema:

O danado do dropzinho la, está aindo até ali só. O safado nao pula pra fora da div e aparece por cima da div banner nem ferrando.

Ja enfiei z-index:-1; na div banner e z-index:99999; na menu, e também nada.

Bom, é isso, se alguem puder me dar uma solução.

Desde já agradeço.

Segue o HTML

   <div class="menu wrap">

       <div class="menu2">
       <ul>
           <li id="menuhight"><a href="index.asp">HOME</a></li>

           <li id="menuhight"><a href="#">SOBRE</a></li>

           <li id="menuhight"><a href="#">LOOKS</a>
               <ul class="company">
                   <li><a  href="#">Currency Conversion</a></li>
                   <li><a  href="#">Free CMA</a></li>
                   <li><a  href="#">Free Reports</a></li>
                   <li><a  href="#">Green Resources</a></li>
                   <li><a  href="#">Home Advice</a></li>
                   <li><a  href="#">International</a></li>
               </ul>
           </li>

           <li id="menuhight"><a href="#">NEW LOOKS</a>
               <ul class="company">
                   <li><a  href="#">Currency Conversion</a></li>
                   <li><a  href="#">Free CMA</a></li>
                   <li><a  href="#">Free Reports</a></li>
                   <li><a  href="#">Green Resources</a></li>
                   <li><a  href="#">Home Advice</a></li>
                   <li><a  href="#">International</a></li>
               </ul>
           </li>   

           <li id="menuhight"><a href="#">ACESSÓRIOS</a>
               <ul class="company">
                   <li><a  href="#">Currency Conversion</a></li>
                   <li><a  href="#">Free CMA</a></li>
                   <li><a  href="#">Free Reports</a></li>
                   <li><a  href="#">Green Resources</a></li>
                   <li><a  href="#">Home Advice</a></li>
                   <li><a  href="#">International</a></li>
               </ul>
           </li>


           <li id="menuhight"><a href="#">CONTATO</a></li>              
       </ul>
       </div>

   </div>
   <div class="banner wrap">
       <img src="imagens/1.jpg"/> 
       <img src="imagens/1.jpg"/> 
       <img src="imagens/1.jpg"/>   
   </div>

CSS

*{
margin:0;
padding: 0;
border:0;
}

.wrap
{
width:			960px;
margin:			0 auto;
position:		relative;
height:			auto;
overflow:		hidden;
min-height:		100%;
border:			1px solid green;	
}

.banner
{
z-index:-1;
}


.menu
/* ====== MENU DROPDOWN ======= */


.menu2 {
font-family: Arial;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
margin: 0px;
font-weight: normal;
line-height: 62px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 140px;
height:50px;
margin-bottom:30px;
background-image:url('../imagens/border_menu2.png');
z-index:99999;
}
/* CSS Document */

.menu2 ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu2 ul li {
margin: 0px;
padding: 0px;
overflow: hidden;
float: left;
}
.menu2 ul li a {
line-height: 47px;
font-family: Arial;
font-size: 16px;
font-weight: normal;
color: #000;
text-decoration: none;
margin: 0px;
padding-top: 0px;
padding-right: 19px;
padding-bottom: 0px;
padding-left: 18px;
}
.menu2   ul li a.selected {
font-family: Arial;
font-size: 16px;
color: #000;
text-decoration: none;
margin: 0px;
font-weight: normal;
line-height: 47px;
padding-top: 15px;
padding-right: 19px;
padding-bottom: 16px;
padding-left: 18px;
background-image: url(../images/menu-hover-bg.jpg);
background-repeat: repeat-x;
background-position: left top;
}
.menu2    ul  li  a:hover {
color: #000;
text-decoration: none;
margin: 0px;
padding-top: 15px;
padding-right: 19px;
padding-bottom: 16px;
padding-left: 18px;
}


.menu2  ul  li  ul  li  {
list-style-type:none;
margin: 0px;
padding: 0px;
}
/*.mainmenu { position: absolute;  z-index: 99; margin: 0 auto; float: left; line-height: 20px; }*/

.menu2  ul  li  ul  li  a {
text-decoration: none;
display: block;
font-family: Arial;
font-size: 16px;
color: #FFFFFF;
background-color: #000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
font-weight: normal;
margin: 0px;
line-height: 36px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 180px;
z-index: 99999;
}
.menu2  ul  li  ul  li  a:hover {
color: #FFFFFF !important;
text-decoration: none;
background-color: #1d1d1d;
line-height: 36px;
}
.menu2   ul   li   ul, .menu2:hover   ul   li   ul  
{
color: #FFFFFF;
display: none;
list-style-type: none;
position: absolute;
margin: 0px;
padding: 0px;
}
.menu2:hover  ul, .menu2:hover  ul  li:hover  ul, .menu2:hover  ul  li:hover  ul  li:hover  ul {
display:block;
}
.company{
padding: 0px;
float: left;
width: 180px;
margin: 0px;
z-index: 99999;
}
.company a{
margin: 0px;
padding: 0px;
}

#menuhight  {
text-decoration: none;
line-height: 47px;
}
#menuhight a {
display: block;
margin: 0;
padding-top: 0;
padding-right: 19px;
padding-bottom: 0;
padding-left: 18px;
}


/* ====== MENU DROPDOWN ======= */

O PROBLEMA

AQUI COM UM VALOR DE HEIGHT definido...

.wrap
{
width:			960px;
margin:			0 auto;
position:		relative;
height:			300px;
border:			1px solid green;	
}

definindo um height pra menu2 também da no mesmo, "resolve" o problema.

André do Vale · Agosto 1, 2012

Ao LI pai do sub-menu, aplique posição relativa, e ao UL (sub-menu), posição absoluta (nesta UL, atribua z-index se necessário, de acordo com os elementos que seguem abaixo na tela). Basicamente isto, dá certo.

Agora, dá uma resumida no seu CSS (aquelas propriedades todas por extenso, joga de forma única, como margin e padding), que ficará mais fácil de lê-lo, e adaptar o que for necessário.

jeffnog3 · Agosto 1, 2012

Caro amigo, já passei vária vezes por essa situação até que um dia toda vez que eu vejo esse problema eu já sei qual é.

Pra resolver coloque position:relative, tanto na ul do menu quanto na div do banner e coloque z-index:; nas duas, sendo que nesse caso, coloque um numero maior na z-index da ul do menu para ele ficar em cima da banner.

Tipo assim:

.menu2 ul{

position:relative;

z-index:99;

}

.banner{

position:relative;

z-index:98;

}

Lyncoln Nellucci · Agosto 2, 2012

Ao LI pai do sub-menu, aplique posição relativa, e ao UL (sub-menu), posição absoluta (nesta UL, atribua z-index se necessário, de acordo com os elementos que seguem abaixo na tela). Basicamente isto, dá certo.

Agora, dá uma resumida no seu CSS (aquelas propriedades todas por extenso, joga de forma única, como margin e padding), que ficará mais fácil de lê-lo, e adaptar o que for necessário.

Olá! Primeiramente obrigado por responder ao meu pedido de ajuda!

Vamos lá!

Bom, de acordo com o que voce falou, eu o fiz.

Primeiro, definir ao LI pai do sub-menu posiçao relative,

.menu2 ul li {
margin: 0px;
padding: 0px;
overflow: hidden;
float: left;
position:relative;
}

ao UL (sub-menu), posição absoluta

.menu2   ul   li   ul, .menu2:hover   ul   li   ul  
{
color: #FFFFFF;
display: none;
list-style-type: none;

margin: 0px;
padding: 0px;

       position: absolute;
}

Resultado:

O sub-menu agora não está aparecendo. Simplismente, sumiu.

Segue abaixo, na imagem estou com o mouse sobre o link do menu que deveria aparecer o sub, mas nada.

Caro amigo, já passei vária vezes por essa situação até que um dia toda vez que eu vejo esse problema eu já sei qual é.

Pra resolver coloque position:relative, tanto na ul do menu quanto na div do banner e coloque z-index:; nas duas, sendo que nesse caso, coloque um numero maior na z-index da ul do menu para ele ficar em cima da banner.

Tipo assim:

.menu2 ul{

position:relative;

z-index:99;

}

.banner{

position:relative;

z-index:98;

}

Oi, obrigado pela resposta.

Tentei sua sugestão, porem o erro mantem. Simplismente não acontece nada. :upset:

André do Vale · Agosto 2, 2012

Joga um z-index alto na UL do sub-menu. Dica: veja onde o elemento está sendo "mostrado" por algum inspetor de elemento (ferramentas de desenvolvedor, FF, IE e Chrome).

Lyncoln Nellucci · Agosto 3, 2012

Joga um z-index alto na UL do sub-menu. Dica: veja onde o elemento está sendo "mostrado" por algum inspetor de elemento (ferramentas de desenvolvedor, FF, IE e Chrome).

Amigo, consegui resolver o problema.

O que estava causando isso tudo, era aquele overflow:hidden; da classe wrap.

De qualquer forma, obrigado pela ajuda.

Entrar

Arquivado

[Resolvido] Menu dropdown cortando.

Recommended Posts

Lyncoln Nellucci 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

jeffnog3 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lyncoln Nellucci 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lyncoln Nellucci 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante