Saludos gente:
Soy nuevo en todo lo que es css y estoy intentando hacer un menú, pero tengo el siguiente problema:
Aqui mi codigo
Código:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style type = "text/css">
ul#menu {
padding: 10px;
}
ul#menu li {
display: inline;
}
ul#menu li a{
width:100px;
text-decoration: none;
color: white;
font-family:Verdana, Geneva, sans-serif;
background-color: #F00;
font-size: 12px;
text-decoration: none;
float: left;
padding: 5px;
border:thin;
border-style:ridge;
border-color: #FEFEFE;
text-align:center;
}
ul#menu li a:hover {
color: white;
background-color: #00F;
}
ul#menu li a:active,
ul#menu li a:focus {
color:#fff;
background-color:black;
}
</style>
</head>
<body>
<div id="mainMenu">
<ul id="menu">
<li>
<a href="#">Inicio</a></li>
<li>
<a href="#">Mi Cuenta</a></li>
<li>
<a href="#">Acerca de</a></li>
<li>
<a href="#">Contáctenos</a></li>
</ul>
</div>
</body>
</html>
Deseo que cuando escoja una opción esta cambie el color de fondo a "negro", pero cuando escoja otra opción esta cambiara el color de fondo a "negro" nuevamente y la anterior volverá a su color original que seria "rojo".
Eh googleado acerca del tema y se recomienda usar la propiedad active, pero no consigo resolver mi problema. Tal vez estoy usándola equivocadamente, así que acudo a ustedes por ayuda.
Gracias de antemano