[Resolvido] Criando menu com rollover de imagem

[Julio Graffin 0]

Boa noite!

 

Pessoal, estou com uma certa dificuldade ao criar o meu menu com rollover, segue meu html e meu css:

 

<ul id="nav">
				<li><a href="#"><span>home</span></a></li>
				<li><a href="#"><span>empresa</span></a></li>
				<li><a href="#"><span>produtos</span></a></li>
				<li><a href="#"><span>serviços</span></a></li>
				<li><a href="#"><span>parceiros</span></a></li>
				<li><a href="#"><span>fotos</span></a></li>
				<li><a href="#"><span>água</span></a></li>
				<li><a href="#"><span>clientes</span></a></li>
				<li><a href="#"><span>contato</span></a></li>
			</ul>

 

/* menu */
header #content_header ul#nav {
width: auto;
float: left;
}
header #content_header ul#nav li {
   float: left;
   height: 48px;
   list-style-type: none;
   padding-left: 6px;
cursor: pointer;
}
header #content_header ul#nav li a {
   color: #144C80;
   display: block;
   font-size: 12px;
   height: 44px;
   padding-left: 12px;
   text-decoration: none;
   width: auto;
cursor: pointer;
font-weight: bold;
}
header #content_header ul#nav li a span {
   cursor: pointer;
   display: block;
   height: auto;
   padding: 12px 24px 27px 0px;
}

/* menu hover / active */
header #content_header ul#nav li:hover {
   background: url("../images/links_nav_left.gif") no-repeat scroll left top transparent;
}
header #content_header ul#nav li a:hover {
background: #F4F3F3;
}
header #content_header ul#nav li a span:hover {
   background: url("../images/links_nav_right.gif") no-repeat scroll right top transparent;
}

 

 

O caso é o seguinte, como podem ver coloquei um bg para funcionar nas tags li, a, span. Fiz isso pois preciso que o espaço seja dinamico, pelo fato de termos aqui nomes de links uns maiores do que os outros. Dessa forma funciona, porém, bugado, se passarem o mouse na borda esquerda de qualquer um vão ver que aparece o bg desse elemento em si, se passo o mouse no a acontece o mesmo, no span o mesmo. Podem me dizer alguma outra forma de fazer funcionar essa ação de rollover que estou querendo fazer? Segue o endereço desse menu

 

Agradeço desde já a atenção.

Abraço!

[William Bruno 1501]

Dá uma olhada na minha solução para o terceiro menu:

http://forum.imasters.com.br/topic/354140-repente-css-menus/page__p__1341165#entry1341165

[Julio Graffin 0]

Dá uma olhada na minha solução para o terceiro menu:

http://forum.imasters.com.br/topic/354140-repente-css-menus/page__p__1341165#entry1341165

 

 

Mano,

 

Segui lá sua orientação e rolou certinho =). Só não testei ainda nos IEs da vida ¬¬, haha

Dá uma olhada aí: juliograffin.com.br/develop/site/

 

Valeu a ajuda bróder!

Abraço!

[William Bruno 1501]

eita.. mas pra q tanto span? hauhauha

 

lá eu resolvi so com o LI e o A.

você usou a do Thiago, a minha ta logo abaixo, hehe.. se quiser melhorar.. da uma olhada depois:

http://www.cenasordidas.hbe.com.br/desafios/terceiroMenu.html

[Julio Graffin 0]

eita.. mas pra q tanto span? hauhauha

 

lá eu resolvi so com o LI e o A.

você usou a do Thiago, a minha ta logo abaixo, hehe.. se quiser melhorar.. da uma olhada depois:

http://www.cenasordidas.hbe.com.br/desafios/terceiroMenu.html

 

 

husahushaushas nossssssss cara, então peguei o exemplo errado!

Bem que eu achei que tinha muito span, achei um solução meio deselegante na real. Mas beleza, vou melhorá-la.

Obrigado pela ajuda mano!

[William Bruno 1501]

Bem que eu achei que tinha muito span, achei um solução meio deselegante na real.

é deselegante com certeza.. hehe

olha a minha.. tá bem feita, e testei nos ies :lol:

[Julio Graffin 0]

eita.. mas pra q tanto span? hauhauha

 

lá eu resolvi so com o LI e o A.

você usou a do Thiago, a minha ta logo abaixo, hehe.. se quiser melhorar.. da uma olhada depois:

http://www.cenasordidas.hbe.com.br/desafios/terceiroMenu.html

 

Eaí William!

 

Cara, então, segui o seu modelo, parece que num rolou legal pra mim, na verdade deu aquele bugzinho do hover em cima do LI, saca? Não entendi o porque?

Bem, dá uma olhada e vê o que acha. Ficou muuuito melhor meu html, mas não rebateu no desempenho, talvez faltou algo. :huh:

 

http://juliograffin.com.br/develop/site/

 

 

Valeu!

[William Bruno 1501]

deu aquele bugzinho do hover em cima do LI, saca? Não entendi o porque?

ahh sim.. agora saquei.

 

Então cara, joga um li:hover também, ai você muda o bg durante ele. [note que tem essa regra no meu, e não tenho esse bug]