Hola a todos, estoy realizando un Menu muy sencillo, pueden verlo en este enlace:
http://www.web-t.com.ar/pruebaMenu
Como podran ver entre enlace y enlace quiero colocar un separador, que en este caso es un jpg, y lo coloco con un background: en el enlace <a> y hago solo se vea solo a la izquierda, el tema es que en el primer enlace no quiero que se vea el separador (la linea negra) a la izquierda de INICIO, con lo cual, utilizo:
ul .first a { background:none;} pero este no funciona, el separador sigue estando, agradeceria que alguien me guie para saber porque no funciona .first en este caso o me den alguna sugerencia al respecto, desde ya, Muchas Gracias.
Dejo codigos HTML y CSS:
HTML:
Código:
<html>
<head>
<title>Prueba de Menu</title>
<link rel=stylesheet href="style.css" type="text/css">
<head>
<body>
<p align="center">Prueba de Menu</p>
<ul>
<li><a href="#"><img alt="inicio" width="42px" height="9px" src="img/inicio.png" /></a></li>
<li><a href="#"><img alt="contacto" width="75px" height="9px" src="img/contacto.png" /></a></li>
<li><a href="#"><img alt="google+" width="19px" height="17px" src="img/google.png" /></a></li>
<li><a href="#"><img alt="twitter" width="70px" height="13px" src="img/twitter.png" /></a></li>
<li><a href="#"><img alt="facebook" width="58px" height="13px" src="img/facebook.png" /></a></li>
</body>
</html>
CSS:
Código:
ul{
margin:0px;
padding:0px;
list-style:none;
width:400px;
}
ul li{
float:left;
}
ul a{
display:block;
text-decoration:none;
color:#000;
padding:0px 11px;
background:url(img/separador.jpg);
background-repeat:no-repeat;
background-position:left middle;
}
ul .first a {
background:none;
}