RESOLVIDO: Menu Drop-down - problemas

[Melvins]

Olá a todos!

Eu segui um tutorial do Maujor.com, que é muito bom - http://www.maujor.com/tutorial/ddownmenu.php. Esta estilização horizontal (? - suponho horizontal porque são menus verticais e dispõem-se uns ao lado dos outros) funcionou, mas o que eu queria era mesmo na horizontal.

O que não estou a conseguir é meter os menus drop-downs a funcionarem.

http://www.lusotenis.com/testes/menu/menu1.html

HTML

<div id="navigation">
       	  	<ul>
           	  	<li><a href="#">Sobre Nós</a>
               	  	<ul>
                   	  	<li><a href="#">Projecto</a></li>
                      	<li><a href="#">Quem Somos</a></li>
                      	<li><a href="#">Direcção</a></li>
                  	</ul>
              	</li>
              	<li><a href="#">Sócios</a></li>
              	<li><a href="#">Agenda</a>
               	  	<ul>
                   	  	<li><a href="#">Notícias</a></li>
                      	<li><a href="#">Calendário</a></li>
                  	</ul>	
              	</li>
              	<li><a href="#">Media</a>
               	  	<ul>
                   	  	<li><a href="#">Videos</a></li>
                      	<li><a href="#">Galerias</a></li>
                  	</ul>
              	</li>
              	<li><a href="#">Links</a></li>
              	<li><a href="#">Contactos</a></li>
        	</ul>
	</div>

CSS

@charset "utf-8";
/* CSS Document */

body {
background:#000;
}

#navigation {
font-family:Verdana, Geneva, sans-serif;
font-size:15px;
text-transform:uppercase;
color:#EEE;
font-weight:bold;
position:relative;
top:30px;
}

#navigation a {
color:#BBB;
text-decoration:none;
}

#navigation a:hover {
color:#990000;
}

#navigation ul {
margin:0;
padding:0;
list-style:none;
margin-left:20px;
height:20px;
}

#navigation ul li {
margin-left:10px;
display:inline;
position:relative;
}

#navigation li ul {
position:absolute;
top:19px;
left:0px;
display:none;
}

#navigation ul li a {
display:inline;
text-decoration:none;

Alguém sabe qual é o problema?

O que queria mesmo fazer era colocar sub-menus (quando existem) também na horizontal (como o menu pai) e com fundo cinzento continuo sob as opções.

[Melvins]

Já encontrei a solução (não total) no videolog:

http://videolog.uol.com.br/video.php?id=431649

Não sei é como meter os sub-menus na horizontal (estão na vertical) do género:

Link 1    Link 2    Link 3

Sub-link 1  Sub-link 2  Sub-link 3

Alguma dica?

[yoda]

clear:both;

[Melvins]

clear:both;

Seria para colocar onde?

Já tenho um "clear:both" em "ul#menu li ul a {", acho que foi por causa de problemas no IE. Supostamente, isto não reforça eles ficarem alinhados na vertical?

Neste momento está

Link 1 Link 2 Link 3

        sub-link 1

        sub.link 2

Eu queria

Link 1 Link 2 Link 3

        sub.link 1 sub-link 2

[yoda]

No ul que fica como submenu.

[Melvins]

Hummm... ok, já tentei em vários lados e nada. Esse "clear:both;" já se encontrava em outros dois locais, se me lembro era para prevenir bugs em IEs antigos. Já tentei meter, tirar e nada.

Mas continuo a não perceber como esse clear ira colocar a disposição na horizontal.

Fica aqui o código:

@charset "utf-8";
/* CSS Document */

/* Menu Drop-down */

#navigation {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
text-transform:uppercase;
color:#BBB;
position:relative;
top:30px;
margin-left:220px;
z-index:1;
}

#navigation a {
color:#BBB;
text-decoration:none;
}

#navigation a:active {
color:#900;
}

#navigation a:hover {
color:#990000;
}

ul {
list-style-type:none;
margin:0;
padding:0;
}

ul#menu {
width:650px;
margin:0 auto;
}

ul#menu li {
position:relative;
float:left;
}

ul#menu li a {
display:block;
float:left;
padding:0 10px;
height:20px;
line-height:15px;
}

ul#menu li a:hover {
color:#900;
}

ul#menu li ul {
display:none;
position:absolute;
top:20px;
left:0;
text-transform:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

ul#menu li:hover ul,
ul#menu li.hover ul{
display:block;
}

ul#menu li ul a {
width:100px;
background:#bbb;
color:#111;
border-bottom:1px solid #333;
}

ul#menu li ul li{
float:left;
clear:both;
}

ul#menu li ul li a {
float:none;
}

[Phear99]

Tanto quanto sei, quando quero colocar as coisas lado a lado em css, ou se usa

float:left/right

(left ou right)

ou utiliza-se

position:absolute

e colocas os elementos um a um no seu devido lugar utilizando top, left, right e bottom.

Pessoalmente, considero os floats melhores, visto não serem estáticos (podes adicionar novos elementos ao menu sem grandes confusões), mas geralmente requerem umas experiências antes que fiquem como queres.

O position requer que coloques os elementos manualmente no sitio, um a um, mas costuma ser uma solução mais rápida.

Quanto ao teu caso específico penso que o erro reside aqui:

ul#menu li ul li{
        float:left;
        clear:both;
}

O float:left está lá para fazer o que tu queres, mas o clear:both anula os float:left/right.

Experimenta e diz qualquer coisa.

(posso estar enganado também, que ninguém me leve a mal isso sff  😞)

[Melvins]

Curioso, o "clear:both" está mesmo a servir no tutorial para prevenir o bug no IE 6. Tive a testar e já tentei várias alterações, mas sem o clear:both fica na mesma nos brownsers, excepto no IE6, ai funciona como pretendo...

Mas, de facto, é estranho, à 1ª vista (apesar de ser iniciante no css) parece que o erro do IE não devia ser erro, mas o standart com aquelas funções.

[Melvins]

Ok, ontem, tentei começar o css do menu do 0 usando apenas a cabeça (com tudo o que aprendi até agora) e deu resultado, a funcionar como queria, excepto nos IE anteriores (do 5.5 ao 7).

Aqui fica o código se for útil para alguém:

@charset "utf-8";
/* CSS Document */

/* Menu Drop-down */

#navigation {
clear:both;
position:relative;
color:#bbb;
top:5px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

ul#menu {
font-size:17px;
}

ul#menu li {
display:block;
float:left;
padding:5px 30px 5px 10px;
text-transform:uppercase;
}

ul#menu li ul {
display:none;
position:absolute;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#222;
}

ul#menu li:hover ul,
ul#menu li.hover ul {
display:block;
}

ul#menu li ul li {
display:block;
float:left;
padding:5px 10px 5px 5px;
width:auto;
text-transform:none;
}

ul#menu li ul li a:hover {
color:#FFF;
}

Os problemas:

IE 7 - Aqui a coisa não funciona muito bem, em vez de aparecer por baixo, o sub-menu aparece também na horizontal (certo), mas ao lado do link do menu principal que o activa do lado direito, sobrepondo-se aos restantes links.

IE 6 - Ainda pior, aparece bem longe do indicado, se bem percebi aparece ao lado da div geral do template que define-o ao centro.

IE 5.5 - Simplesmente os sub-menus não funcionam. Em principio, não coloca problema porque suponho que já é residual o número dos que ainda usam este brownser.

Se alguém souber como resolver o problema, ficava agradecido. 😉

[Melvins]

Ok, foi mais fácil do que pensei, consegui resolver os problemas no IE 6 e 7.

Soluções:

Em primeiro no 7, ele estava a aparecer ao lado do link e não em baixo, daí tive de:

- criar um "top" para ele baixar na altura;

No entanto ele apenas baixa, ficando a sudeste em relação ao link do menu pai. Como o "ul" dos sub-menus estão posicionados em absoluto, colocar um "left: 0px;" coloca todos os sub-menus encostados à esquerda. A solução foi identificar os sub-menus:

- criar "id" para os sub-menus na sua tag "<ul>";

- colocar o "left" necessário para cada um dos sub-menus para ficarem posicionados por baixo do link pai (o valor a meter em cada pode ser medido ou feito por tentativas);

Problema resolvido no IE 7

Depois no IE 6, um pouco mais complicado, mas acaba por ser mais ou menos a mesma solução, mas adaptada. Aliás, o site já tinha um css a funcionar apenas e só para o IE 6 (com o If no cabeçalho) para fazer funcionar a pseudo-class do hover num li. Adiante, basicamente foi ir a esse ficheiro...

Recordo que o problema é que aparecia bem deslocado para a direita (ele só contava a partir do fim do menu principal para a direita), como o "top" usado para o IE 7 já estava aplicado a todo o "li ul", então a única adaptação para só o IE 6 ler era colocar "lefts" negativos.

- Colocar para cada um dos sub-menus identificados o seu "left" negativo (ex: 1º sub-menu -> ul#sub_menu1 {left:-600px;};

Acho que isto resolveu de vez o problema em cada brownser.

Em relação ao IE 5.5 acho que é inútil arranjar solução, só o menu pai funciona.