html
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<ul id="menuhorizontal">
<li><a href="nosotros.html" target="_self">nosotros</a></li>
<li><a href="productos.html" target="_self">productos</a></li>
<li><a href="clientes.html" target="_self">clientes</a></li>
<li class="current"><a href="contactenos.html" target="_self">contactenos</a></li>
</ul>
Contactenos...
</body>
</html>
css
body {
background-color:aqua;
}
#menuhorizontal {
float:left;
width:100%;
padding:0px;
margin:0px;
list-style-type:none;
}
#menuhorizontal a {
float:left;
width:100px;
height:25px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-image:url(image.jpg);
padding:3px 5px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-right:1px solid green;
}
#menuhorizontal a:focus, #menuhorizontal a:hover, #menuhorizontal .current a {
background-image:url(image1.jpg);
color:#333;
border-right:0px solid #f00;
}
#menuhorizontal li {
display:inline;
}
Ahora mi codigo es el siguiente
html
<nav id="barra">
<ul>
<a href="index.html" target="_self"><li>INICIO</li></a>
<a href="paginas/nosotros.html" target="_self"><li>NOSOTROS</li></a>
<a href="paginas/servicios.html" target="_self"><li>SERVICIOS</li></a>
<a href="paginas/galeria.html" target="_self"><li>LA FLOTA</li></a>
<a href="paginas/contacto.html" target="_self"><li>CONTACTO</li></a>
</ul>
</nav>
css
#barra ul a li {
float:left;
width:155px;
height:50px;
margin:0px;
border-radius:0px 45px 0px 45px;
color:#D7D9DF;
border:none;
font-family:Arial;
font-size:21px;
background:#0E446D;
color:#D7D9DF;
text-align:center;
transition:all 1s ease;
}
#barra ul a li:hover, #barra ul a li:focus {
font-weight:normal;
border-radius:45px 0px 45px 0px;
color:white;
background:#0E446D;
opacity:.8;
filter:alpha(opacity=80);
transform:scale(1, 1);
transition:all 1s ease;
}
De antemano, gracias.
