[Resolvido] Problemas com Menu Drop Down

[fernandotholl 19]

Boa tarde pessoal!

 

Novamente, no layout que estou montando aqui agora tive um problema no menu Drop Down que fiz do zero. Ele está funcionando, porém ele aparece sob o menu principal, como na imagem abaixo:

 

 

Eu quero que o Sub-menu apareça abaixo do menu principal, e não em cima.

 

Segue meu código:

 

HTML

<div id="menu">
               <ul>
                   <li><a href="index.html" title="Página Inicial" class="home"><img src="imagens/home.png" alt="Página Inicial" /> Página Inicial</a></li>
                   <li>
                       <a href="interna.html" title="Consulta"  class="consulta"><img src="imagens/consulta-branco.png" alt="Consulta" /> Consulta</a>
                       <ul>
                           <li><a href="interna.html" title="Fórum"><img src="imagens/forum-mini.png" alt="Fórum" /> Sub-menu 1</a></li>
                           <li><a href="interna.html" title="Fórum"><img src="imagens/forum-mini.png" alt="Fórum" /> Sub-menu 2</a></li>
                           <li><a href="interna.html" title="Fórum"><img src="imagens/forum-mini.png" alt="Fórum" /> Sub-menu 3</a></li>                        
                           <li><a href="interna.html" title="Fórum"><img src="imagens/forum-mini.png" alt="Fórum" /> Sub-menu 4</a></li>
                       </ul>
                   </li>
                   <li><a href="interna.html" title="Fórum"  class="forum"><img src="imagens/forum-mini.png" alt="Fórum" /> Fórum</a></li>
                   <li><a href="interna.html" title="Eventos"  class="eventos"><img src="imagens/eventos-mini.png" alt="Eventos" /> Eventos</a></li>
                   <li><a href="interna.html" title="Multimídia" class="multimidia"><img src="imagens/multimidia-mini.png" alt="Multimídia" /> Multimídia</a></li>
                   <li><a href="interna.html" title="Sistemas" class="sistemas"><img src="imagens/sistemas-mini.png" alt="Sistemas" /> Sistemas</a></li>
               </ul>
           </div>

CSS

<style>
#menu{
   margin: -11px auto 0 auto; /* EDIT */
   width: 1024px;
   height: 35px;
   padding: 0 0 0 0;
}

#menu ul{
   list-style: none;
   position:relative; /* ADD */
   z-index:2; /* ADD */
}

#menu ul li{
   display: inline; 
   cursor: pointer;
   margin: 0 0 0 0;
   list-style: none; /* ADD */
   float:left;
}

#menu ul li a{
   display:block; /* ADD */
   color: #FFFFFF;
   float:left;
   padding: 10px 15px 0 15px;
   margin: 0 0 0 0;
   height:26px;
}

#menu ul a:hover{ color: #1C5A8C; background: url('../imagens/menu-bg-hover.jpg') repeat-x;}
#menu ul .home img{ float:left; margin: 3px 6px 0 0;}

#menu ul li ul{
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   background-color: #EBEBEB;
   float:left;
   position:absolute;
   z-index:1;
}

#menu ul li ul li{
   float:none;
   display:block;
   padding: 0 0 !important;
   border-top:1px solid #dbe2ec;
}

#menu ul li ul li a{
   color: #1B598C;
}
</style>

 

jQuery

$("#menu ul li ul").hide();    
   $("#menu ul li").hover(
function(){ $(this).find("ul:first").slideDown("slow"); },
function(){ $(this).find("ul:first").slideUp("slow"); }
   );   

 

Já estou a horas tentando resolver isso e nada, tentei position relative para o menu principal, e absolute para o submenu, porem ele fica no inicio do menu e não no final como esperado.

 

Peço a ajuda de vocês

[William Bruno 1501]

basta você trabalhar com top e left aqui:

#menu ul li ul{

 

um top: 26px, acho q já resolve.

[fernandotholl 19]

Funcionou Willian, mais me explica uma coisa, qual seria a diferença

 

de:

margin: 35px 0 0 0;

 

Para:

top: 35px;

 

 

Pois minha ul estava assim, e colocando um margin-top ele até ficava na posição correta, porem ele continuava rolando la de cima.

 

Mais com o top: 35px rolava o efeito do jquery na posição correta e o posicionamento final também ficou tudo ok!

[NetBoy16 72]

Eu nao sou o william mas vou te ajudar :thumbsup:

 

No css propriedades podem ser resumidas, por exemplo:

 

ul {
  margin-top:10px;
  margin-right:10px;
  margin-bottom:10px;
  margin-left:10px;
}

/* isso pode ser resumido ficando assim: */

ul {
  margin:10px 10px 10px 10px;
}

/* ou visto que os 4 tem o mesmo valor, mais resumido ainda */
ul {
  margin:10px
}

 

Como saber qual valor pertence a qual propriedade?

 

R:Leve em consideracao o sentido horario, o primeiro é top, o segundo right, o terceiro bottom e o ultimo left.

 

ex:

 

ul {
  margin:5px 10px 15px 20px;
}

 

assim:

 

5px

/\

20px< >10px

\/

15px

 

 

tem outras formas de resumir tb, um outro exemplo que eu lembro:

 

ul {
  margin:10px 5px; /* aplica margem de 10 pixels no topo e rodape e margem de 5 pixels nas laterais direita e esquerda */
}

 

 

Agora se a sua duvida nao é essa e sim a diferenca entre margin-top e top, acredito que essa explicacao seja suficiente:

 

Margin-top cria uma margen no topo do elemento levando em consideracao o elemento anterior, já o top alinha o elemento em direcao ao topo da pagina, usado em combinacao com position absolute e position relativa e acredito eu que tb com position fixed, se você deixar o position no valor padrao(static) essa propriedade nao funcionará, apenas o margin-top.

 

 

Aiai, é isso ai, espero que essa explicao tenha sanado suas duvidas :grin:

[fernandotholl 19]

Obrigado por responder NetBoy16!

 

Então, por isso a minha dúvida, eu sei que o top é uma "versão" resumida de margin-top. Para explicar melhor, olha o que acontece:

 

Usando margin 35px

margin: 35px 0 0 0;

 

O resultado é esse:

 

 

Agora usando:

top: 35px;

 

O resultado é esse:

 

Veja, no primeiro o efeito do Jquery começa lá em cima, já na segunda imagem, o efeito do jQuery começa no local Correto.

 

Isso que não consegui entender. A diferença em utilizar os dois e porque o efeito ficou correto em um e em outro não.

[William Bruno 1501]

por causa do absolute amigo.

margins "não fazem muito sentido", qndo você está usando position.(salvos alguns casos)

 

 

e também pq o jQuery está "animando" a propriedade .top do elemento(acredito eu), dá uma acompanhada pelo firebug, para você ver qual é a propriedade q ele está "mexendo".

[fernandotholl 19]

Ops, não tinha verificado o edit que você fez no Post, mais era isso mesmo.

[NetBoy16 72]

é como eu falei, margin-top cria margem em relacao ao elemento anterior, no caso o menu Consulta, nao deu pra perceber direito pela imagem, mas talvez o efeito do jquery aumente um pouquinho o tamanho do menu, assim a margem fica diferente e por consequencia o posicionamento também, pois como eu disse, ele cria uma margem em relacao ao elemento anterior, já no caso do top, ele nao cria a margem em relacao ao elemento anterior, mas sim posiciona o elemento em direcaao do topo da pagina, assim nesse caso o menu consultorio pode aumentar de tamanho que nao vaqi afetar o alinhamento.

 

Estou certo tiu Uill ? :rolleyes:

 

Caso nao me perdoe, pois foi assim que eu aprendi(espero estar certo :grin: )