Soy novato en el tema de html y css, pero estimo que nadie nació sabiendo, por lo que estoy dispuesto a aprender cada día un poco más.
Paso a la consulta concreta:
Como verán, en mi web, la opción inicio del menú siempre queda activada por defecto, lo cual lo veo muy bien y no deseo modificar.
Pero, cuando se elige otra opción del mismo menú, sigue activada la opción de inicio, vale decir, lo que deseo es que cuando elija la opción 2, la 1 quede desactivada, ó si elijo la 3 que sea solo la opción que elijo la que quede iluminada.
Comentarles que cada opción del menú horizontal es un archivo php distinto, pero sabiendo modificar el css estimo que quedarán todos los códigos html que están dentro de los php corregidos.
Con mis pocos conocimientos, creo haber encontrado la parte de los códigos que tendría que modificar.
En el archivo 1.php tengo lo siguiente:
Código HTML :
<body>{{ga_code}}<div class="root"><div class="vbox wb_container" id="wb_header">
<div id="wb_element_instance0" class="wb_element"><ul class="hmenu"><li class="active"><a href="CHz-Radio/" target="_self" title="CHz-Radio">CHz-RaDiO</a></li><li><a href="Propuesta/" target="_self" title="Propuesta">Propuesta</a></li><li><a href="Contacto/" target="_self" title="Contacto">Contacto</a></li></ul></div><div id="wb_element_instance1" class="wb_element" style=" overflow: hidden;"><script>En el archivo site.css lo siguiente:
Código CSS :
.hmenu {
display: block; list-style-type: none; padding: 0px; margin: 0px; width: 100%;
height: 100%; float: left; overflow: visible;
}
.hmenu { white-space: nowrap; }
.vmenu li,
.hmenu li { position: relative; display: block; display: inline-block; padding: 0px; margin: 0px; }
.vmenu li { clear: both; display: block; }
.vmenu li a,
.hmenu li a { display: block; }
.vmenu ul,
.hmenu ul { display: none; position: absolute; margin-left: 0; padding-left: 0; left: 100%; top: 0; }
.vmenu ul li,
.hmenu ul li { display: block; }
.hmenu ul li:first-child,
.vmenu ul li:first-child { margin-top: 0 ! important; }
.hmenu > li > ul { left: 0; top: 100%; }
.hmenu li:hover > ul, .vmenu li:hover > ul { display: block; }
.vmenu ul a, .hmenu ul a { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }¿Que debería de modificar para lograr mi objetivo?
Atentos saludos
