Item de menu com 2 fundos

[André do Vale 76]

Olá,

 

Estou estruturando um menu, porém me apareceu uma dúvida.

 

 

Nos li normais, tenho um fundo posicionado "left center no-repeat". Porém, quando o efeito é hover, eu teria que ter 2 fundos, o primeiro (right center no-repeat) e o segundo (center bottom no-repeat).

 

 

Pelo que sei, isto não é possível nos navegadores "normais".

 

 

Alguém teria alguma solução? Poderia até ser usando JS ou programação PHP... :wacko:

[André do Vale 76]

Bom, como o serviço é pra ontem, me arranjei com um pequeno JS:

 

function Menu(celula){
	if(celula.style.background == '' || celula.style.background == 'none transparent scroll repeat 0% 0%'){
		celula.style.background='url(img_index/menu_h_bot.jpg) bottom center no-repeat';
	} else {
		celula.style.background = '';
	}
}

 

E nas "li" do menu, atribuo:

 

onMouseOver="Menu(this);" onMouseOut="Menu(this);"

 

E a ancora que fica por dentro, eu altero pelo CSS.

 

 

Caso tenham outra solução que fique mais fácil, por favor postem ae o/

[brcontainer 16]

fundos, o primeiro (right center no-repeat) e o segundo (center bottom no-repeat).

Dois fundos?

poderia ser mais especifico. Se for o que eu penso, recomendo mesmo o uso de JAVASCRIPT por causa do HOVER não funcionar no IE6.

 

Mas em CSS você poderia cria dois elementos seria um o LI e usar um elemento inline valido o SPAN

ficaria assim:

 

#menu li{
background: none;/*altere aqui se quise*/
}

#menu span{
background: none;/*altere aqui se quise*/
}
#menu li:hover{
background: url(img_index/menu_h_bot.jpg) right center no-repeat;
}

#menu span:hover{
background: url(img_index/menu_h_bot.jpg) bottom center no-repeat;
}

<ul id="menu">
<li>
<span>Texto</span>
</li>
</ul>

para ativar o hover no IE6:

http://forum.imasters.com.br/index.php?showtopic=276142

não testei ainda xD