CSS - Abrir div

[Carlo Schneider]

João Paulo, já vi que é possível fazer menus dropdown em JavaScript, o menu da administração do WHMCS é só em CSS, mas é muito complicado, não tive paciência de estudar como é feito.

Mesmo tendo acertado em parte o que eu queria, ainda estou tendo problemas com o negocio de position absolute. CSS parece simples, mas as vezes complica :P

[joaopaulo]

mas qual é o seu problema com o absolute? O que está saindo errado?

[Carlo Schneider]

Vou fazer um exemplo e ti mostro.

[lucast]

Ui. explique aí pra gente. Sempre é bem vindo novas idéias.

Vc diz fazer isso como se fosse um menu em css?

Desculpa pela demora...

Sim, os menus em dropdown são feitos dessa forma também. Você tem que ter um elemento dentro do outro, vou utilizar listas aqui:

<ul id="pai">

<li>Texto qualquer</li>

<li>texto1

<ul id="filho">

<li>texto que vai ser mostrado quando o mouse passar pelo texto1</li>

</ul>

</li>

<li>Texto qualquer</li>

</ul>

Eu vou fazer para que o ul#filho apareça quando o mouse passar por cima do texto1, então no início ele não vai aparecer, logo, vamos colcar um display:none

ul#filho {

display:none;

}

Beleza, agora eu quero que o ul#filho, apareça quando eu passar o mouse pelo texto1, vamos pensar e transcrever pra css desta forma: "Quando o li da ul#pai tiver o mouse em cima, mostra a ul#filho"

ul#pai li:hover ul#filho {

display:block;

}

Agora o ul#filho aparece quando o li tem o mouse em cima, mas quando ele é mostrado ele acaba empurrando a proxima li pra baixo. Como a gente quer que ela aparece por cima do texto que tem em seguida, a gente adiciona a propriedade position:absolute no ul#filho, ficando assim:

ul#filho {

display:none;

position:absolute;

}

ul#pai li:hover ul#filho {

display:block;

}

Agora vem o posicionamento dela. A posição da ul#filho é fixa em relação ao li que à contem, ou seja, tu só vai poder mudar o posicionamento com o margin e padding, sempre em relação ao li.

abraço

[tekobr]

lucasr, excelente essa sua explicação, uma verdadeira aula. Agora fibalmente entendi o esquema de menus em css.

[Jordan Miguel]

Ótima dica Lucas, exatamente como pensei quando falou do CSS.