Hola. He estado haciendo algunas pruebas y he conseguido que funcione:
Básicamente he redefinido algunas reglas del CSS y he puesto la clase seleccionado al enlace y no al listado. Lo otro que he hecho, como verás es redefinir las reglas haciendo que apunten a
#navlist en lugar del
#navcontainer
Creo que el problema original que tenías era porque las reglas no se aplicaban en el orden que querías.
Espero que te esto ayude
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Prueba Foros del Web</title>
<style type="text/css">
#navcontainer {
margin-top: 0px;
margin-left: 0px;
padding: 0;
height: 20px;
}
#navlist {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navlist li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#navlist li a {
font:Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size:16px;
background: #006ab3;
width: 138px;
height: 25px;
border: 1px solid black;
padding: 0;
margin-top: 0px
margin-left: 0px
margin-right: 10px;
display: block;
color: white;
text-decoration: none;
text-align:center;
}
#navlist li a:hover {
color: #ffd800;
background: #006ab3;
}
#navlist li a:active {
background: #ffd800;
color: #006ab3;
}
#navlist .seleccionado {
color: #006ab3;
background: #ffd800;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="seleccionado" href="index.php">Inicio</a></li>
<li><a href="quienes_somos.php">quienes somos</a></li>
<li><a href="producto.php">productos</a></li>
<li><a href="promociones.php">promociones</a></li>
<li><a href="contacto.php">contacto</a></li>
</ul>
</div>
</body>
</html>