Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fernandotholl.net/imagens/menu2.jpg&key=1b64c70149b4b49fbc2a306008e7b6d08531c4674ad57d49fa7750ed2c9bc2a7" alt="menu2.jpg" />
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
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!
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:
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fernandotholl.net/imagens/slide1.jpg&key=c15c32fa86bbb595d3d1914171382c855ad74d9ad7697aa090b9befa55f008f7" alt="slide1.jpg" />
Agora usando:
top: 35px;
O resultado é esse:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fernandotholl.net/imagens/slide2.jpg&key=9ed3e583bd6d96565b03ee5510c12e82ab513ee9ae86a51202f62b173fa0eb87" alt="slide2.jpg" />
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.
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".
Ops, não tinha verificado o edit que você fez no Post, mais era isso mesmo.
é 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: )
basta você trabalhar com top e left aqui:
#menu ul li ul{
um top: 26px, acho q já resolve.