Hola gente.
Estoy haciendo una página en la que utilizo un menú con CSS. Es una barra de color en degradé y hay 5 secciones. Cada vez que paso el mouse por arriba, hay una pequeña modificación en el color.
He dejado un espacio al final (digamos que es el lugar de un botón) y lo tengo para pegar dos banderitas chiquitas dentro de la zona del menú. La idea es que las mismas sirvan para pasar de un idioma al otro.
Sin embargo no me sale: cuando pongo la banderita y voy con el mouse, se ve el área activa, como si se tratara de un botón más. Alguien podría ayudarme para evitar esto?
CSS:
Código:
#nav {
margin:0;
padding: 0 0 20px 10px;
background: url(menu_bg.jpg) repeat-x;
}
html>body #nav {
padding: 0 0 38px 0px;
}
#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#nav a:link, #nav a:visited {
float: left;
font-size: 18px;
line-height: 38px;
font-weight: bold;
padding: 0 32px 0px 32px;
text-decoration: none;
color: #FFF;
}
#nav a:link.active, #nav a:visited.active, #nav a:hover {
color: #FFF;
background: url(menu_bg-active.jpg) repeat center;
}
#flag {
margin-bottom:50px;
padding: 0 0 20px 10px;
}
Código HTML:
<ul id="nav">
<li><a href="index_en.htm">Inicio</a></li>
<li><a href="services_en.htm">Nuestros servicios</a></li>
<li><a href="#">Muestras</a></li>
<li><a href="customers_en.htm">Clientes</a></li>
<li><a href="contact_en.htm">Contacto</a></li>
<li><a href="contact_en.htm"><img id="flag" src="en.png"/></a></li>
</ul>
Se puede acomodar de alguna manera, evitando que el problema de que me muestra zona activa detrás de la bandera?