Menu CSS

[MTavares]

Caros colegas,

estou desenvolvendo um menu em CSS do qual preciso com que o primeiro item da esquerda e o primeiro item da direita levem uma imagem diferente. Eu coloquei dessa forma, vejam:

<div id="menuSuperior">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="produtos.html">Produtos</a></li>

<li><a href="clientes.html">Clientes</a></li>

<li><a href="contato.html">Contato</a></li>

</ul>

</div>

CSS:

#menuSuperior{ background-image: url(imagens/menuInativo.jpg); display:table; }

#menuSuperior ul{ float:right; width: 855px; height:49px; list-style:none; }

#menuSuperior li{ float:left; height:49px; display:inline; }

#menuSuperior li a{ float:left; width:140px; height:49px; background-image:url(imagens/menuAtivo.jpg); font-size:18px; text-align:center; font-family:Arial, Helvetica, sans-serif; color:#666; text-decoration:none; line-height:45px; }

#menuSuperior li a:hover{ float:left;width:140px; height:49px; background-image: url(imagens/menuInativo.jpg); font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; }

#menuSuperior li.ativo a:active{ float:left; width:140px; height:49px; background-image: url(imagens/menuAtivo.jpg); font-family:Arial, Helvetica, sans-serif; color:#3399FF; }

O menu funciona perfeitamente, só que o item do menu Home e o de Contato são imagens diferentes. Como eu faria para com que o item Home e Contato levem outra imagem diferente do resto do menu?

abraços.

[Thiago Gema]

HTML

<div>
<ul>
<li id="menu_especial"><a href="index.html">Home</a></li>
<li id="menu_normal"><a href="produtos.html">Produtos</a></li>
<li id="menu_normal"><a href="clientes.html">Clientes</a></li>
<li id="menu_especial"><a href="contato.html">Contato</a></li>
</ul>
</div>

CSS:

#menu_normal { background-image: url(imagens/menuInativo.jpg); display:table; }
#menu_normal  ul{ float:right; width: 855px; height:49px; list-style:none; }
#menu_normal  li{ float:left; height:49px; display:inline; }
#menu_normal  li a{ float:left; width:140px; height:49px; background-image:url(imagens/menuAtivo.jpg); font-size:18px; text-align:center; font-family:Arial, Helvetica, sans-serif; color:#666; text-decoration:none; line-height:45px; }
#menu_normal  li a:hover{ float:left;width:140px; height:49px; background-image: url(imagens/menuInativo.jpg); font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; }
#menu_normal  li.ativo a:active{ float:left; width:140px; height:49px; background-image: url(imagens/menuAtivo.jpg); font-family:Arial, Helvetica, sans-serif; color:#3399FF; } 

#menu_especial { background-image: url(imagens/xxxxxxxxx.jpg); display:table; }
#menu_especial  ul{ float:right; width: 855px; height:49px; list-style:none; }
#menu_especial  li{ float:left; height:49px; display:inline; }
#menu_especial  li a{ float:left; width:140px; height:49px; background-image:url(imagens/xxxxxxxxx.jpg); font-size:18px; text-align:center; font-family:Arial, Helvetica, sans-serif; color:#666; text-decoration:none; line-height:45px; }
#menu_especial  li a:hover{ float:left;width:140px; height:49px; background-image: url(imagens/xxxxxxxxx.jpg); font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; }
#menu_especial  li.ativo a:active{ float:left; width:140px; height:49px; background-image: url(imagens/xxxxxxxxx.jpg); font-family:Arial, Helvetica, sans-serif; color:#3399FF; }

Testa ai, não sou o master, mas eu quebraria o galho assim.

[MTavares]

Olá Thiago,

obrigado pela força, mas se no caso a div for da seguinte forma:

<div id="menu-superior">

<ul>

<li id="menu_especial"><a href="index.html">Home</a></li>

<li id="menu_normal"><a href="produtos.html">Produtos</a></li>

<li id="menu_normal"><a href="clientes.html">Clientes</a></li>

<li id="menu_especial"><a href="contato.html">Contato</a></li>

</ul>

</div>

como eu faria? eu tentei colocar diretamente conforme você informou, mas acredito que por essa div ter um id, ele pode estar interferindo.

abraços e obrigado!

[Thiago Gema]

O que vai ter nesse menu_superior?

[MTavares]

na verdade nele vai o menu....

abs