Tengo un mega menú desplegable que funciona de diez! hasta el momento , pero no muestra el botón visitado con color. A ver si me explico mejor, cuando paso el mouse por la barra de menú (mouse roller) todo esta bien, se muestran los botones en color celeste , pero cuando ingreso a alguna pagina a través de alguno de estos botones , o desde otra parte (da igual) , no queda el botón con el color celeste indicando que estoy en esa pagina. creía yo que la regla era :visited , pero hay tantas cosas en el css de este menú que no se si me confundo o no logro encontrar donde esta el problema, creía que la razón era que tenia que cambiar el link del botón pero no modifica en nada.
En primer lugar le puce como # el link : http://www.miweb.com/index.html (obvio en este caso para el botón inicio. Pero nada.
En segundo lugar probé solo con index.html , y tampoco , nada.
Obviamente me direcciona perfecto de las dos maneras pero no muestra el botón del color de la pagina que esta visitada en ese momento.
Aca esta el HTML y css (funcionando) del menú, falta el .js pero no creo que haga falta.
Código HTML :
<style type="text/css">
h3 {
font-size: 13px;
font-family: "Open Sans";
color: #fff;
margin: 0;
padding: 8px 0 8px 15px;
text-transform: uppercase;
font-weight: 300;
}
img {
border:none;
}
.megamenu {
border: 1px solid #000000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-family: "Open Sans";
font-size: 13px;
width: 725px;
height: 112px;
color: #FFF;
margin: 0;
padding: 0;
background-color: #000000;
}
.megamenu ul {
text-align: center;
list-style-type: none;
margin: 0;
padding-top: 45px;
padding-bottom: 16px;
padding-right: 16px;
padding-left: 16px;
}
.megamenu ul li {
list-style-type: none;
display: inline;
margin: 0;
padding: 0;
}
.megamenu ul li a,.megamenu ul li a:visited {
text-decoration: none;
color: #FFF;
margin: 0;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.megamenu ul li a:hover,.megamenu ul li a:visited:hover {
text-decoration: none;
color: #000000;
margin: 0;
padding-top: 45px;
padding-right: 20px;
padding-bottom: 51px;
padding-left: 20px;
background-color: #29abe2;
}
.megamenu ul li.downservices {
background:url(images/arrow.png) 100% 55% no-repeat;
margin:0;
padding:10px 8px 10px 10px;
}
.servicesdropped {
display: none;
text-align: left;
position: absolute;
font-size: 12px;
width: 590px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
margin: 10px 0 0 20px;
padding: 10px 20px 20px;
background-color: #2b2b2c;
}
.servicesdropped d.textleft {
float:left;
font-size:12px;
width:200px;
margin:10px 0 0;
padding:0 20px 15px 10px;
}
.servicesdropped .middle {
text-align: left;
float: left;
border-right: 1px solid #333;
border-left: 1px solid #333;
font-size: 12px;
width: 180px;
margin: 0;
padding: 0;
font-family: "Open Sans";
}
.servicesdropped .right {
text-align:left;
float:left;
border-right: 1px solid #333;
font-size:12px;
width:178px;
margin:0;
padding:0;
}
.servicesdropped ul.right li a,.servicesdropped ul.middle li a {
list-style-type:none;
display:block;
color:#888;
font-size:12px;
margin:0;
padding:5px 0 5px 20px;
}
.servicesdropped ul.right li a:hover,.servicesdropped ul.middle li a:hover {
list-style-type: none;
color: #000000;
display: block;
font-size: 12px;
margin: 0;
padding: 5px 0 5px 21px;
}
</style>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").click(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
</head>
<body>
<div class="megamenu">
<ul>
<li><a href="http://www.miweb.com/index.html">INICIO</a></li>
<li><a href="#">QUIENES SOMOS</a></li>
<li class="downservices"><a href="#">SERVICIOS</a></li>
<div class="servicesdropped">
<ul class="middle">
<h3>Insectos tipicos</h3>
<li><a href="#">Cucarachas</a></li>
<li><a href="#">Hormigas</a></li>
<li><a href="#">Pulgas o Garrapatas</a></li>
<li><a href="#">Moscas o Mosquitos</a></li>
<li><a href="#">Mosquitas</a></li>
<li><a href="#">Arañas</a></li>
</ul>
<ul class="right">
<h3>Insectos atipicos</h3>
<li><a href="#">Termitas o Bichos taladro</a></li>
<li><a href="#">Vinchucas</a></li>
<li><a href="#">Grillos</a></li>
<li><a href="#">Alacranes</a></li>
<li><a href="#">Abejas o Avispas</a></li>
</ul>
<ul class="right">
<h3>Aves y Mamiferos</h3>
<li><a href="#">Ratas, Ratones o Lauchas</a></li>
<li><a href="#">Murciélagos</a></li>
<li><a href="#">Palomas</a></li>
</ul>
<ul class="right">
<h3>Locales e Instituciones</h3>
<li><a href="#">Locales de comidas</a></li>
<li><a href="#">Colegios</a></li>
<li><a href="#">Clubes</a></li>
</ul>
</div>
<li><a href="#">PREGUNTAS FRECUENTES</a></li>
<li><a href="#">CONTACTO</a></li>
</ul>
</div>
</body>
</html>Creo que con tanto código ya estoy ciego
