Estoy realizando un menú horizontal y quiero que el campo que se haga click se quede en otro color, estoy usando solo html y css. Hasta ahora solamente consigo que cambie de color si sitúo el cursor sobre el campo en cuestión, pero si lo quito, el marcado se pierde. No consigo dar con algún tutorial ni nada parecido que trate este tema, por lo que me sería de gran ayuda su colaboración.
Os adjunto el HTML y CSS
/*Menú horizontal*/
.menuhorizontal{
width: 100%;
margin: 0px auto;
background-color: ;
text-align: center;
}
.menuhorizontal ul {
list-style-type: none;
display: inline-block;
background-color: white;
}
.menuhorizontal ul li {
float: left;
margin-top: 10px;
font-size: 1.5em;
padding: 2px;
margin: 3px;
border: 1px solid black;
}
li {
font-size: 1.5em;
padding: 2px;
margin: 3px;
border: 2px solid black;
border-radius: 10px;
}
a {
padding: 5px;
font-family: "Times New Roman", Times;
text-decoration: none;
color: black;
}
a:hover {
color: red;
}
li:hover {
background-color: none;
}
a:active{
font-weight: bold;
}
<div class="menuhorizontal">
<ul>
<li>
<a href="index.html">Index</a>
</li>
<li>
<a href="1.html">Quienes Somos</a>
</li>
<li>
<a href="2.html">Nuestras Actvidades</a>
</li>
<li>
<a href="">Contacto</a>
</li>
</ul>
</div>
Se agradece cualquier tipo de ayuda
:active
ni:visited
, porque con sólo presionar, vas a cambiar de página. Lo más sencillo es crear una clase.active
que esté activa (valga la redundancia) en cada ítem del menú de la página en cuestión que estás visitando. Esto puede ser tedioso cuando manejas múltiples páginas y un mismo menú, te recomiendo leas sobre incluir un único template en diferentes páginas.