Saludos amigos foreros, tengo un pequeño problema con mi menu, pues me gustaria que la opcion seleccionada quedara marcada, con css (no css3) no se puede pues la propiedad a:active, al dar click en cualquier parte de la pagina hace que se desmarque la opcion, estaba pensando en hacerlo con javascript y me quedo mas o menos asi:
Código:
<html>
<head>
<title>Menu</title>
<style type="text/css">
.menu {
padding: 0;
margin: 0;
list-style:none;
height: 41px;
line-height: 41px;
background: url(Menu.png) repeat-x;
}
.menu li {
display:block;
float: left;
position:relative;
margin-left: 4px;
}
.menu li a {
padding: 4px;
font-size: 8pt;
font-family: Arial;
font-weight: bold;
color:#655cb6;
text-decoration: none;
}
.menu li a:hover {
text-decoration: none;
background-color: #eeeeee;
}
.menu-active {
text-decoration: none;
background-color: #eeeeee;
}
</style>
<script type="text/javascript">
window.onload = function cambia()
{
$listas = document.getElementById('navbar');
$lista = $listas.getElementsByTagName('li');
for ($i=0; $i<$lista.length; $i++)
{
$li = $lista[$i];
$li.onclick="className='menu-active'";
}
}
</script>
</head>
<body style="margin:0px">
<ul class="menu" id="navbar">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</body>
</html>
Con el js hago un array que busque todos los elementos li y cambie de clase cuando se da click, y funciona el problema es que al dar click si se queda marcado pero ocupa todo el alto del menu, y deberia ocupar solo el alto de .menu li a:hover alguna idea de como resolver esto?