18/08/2012, 18:45
|
| | Fecha de Ingreso: septiembre-2011 Ubicación: Gran Canaria
Mensajes: 134
Antigüedad: 13 años, 2 meses Puntos: 1 | |
Respuesta: Menu jQuery Muchas gracias por responder.
He revisado y modificado, y algo se me escapa.
En el header tengo:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li:has(ul)').hover(
function(e)
{
$(this).find('ul').css({display: "block"});
},
function(e)
{
$(this).find('ul').css({display: "none"});
}
);
});
</script>
<ul class="menu">
<li><a href="http://farmaciaciudadalta.com/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Inicio.png"></a>
<ul>
<li><a href="http://farmaciaciudadalta.com/">Inicio</a></li>
</ul>
<li><a href="http://farmaciaciudadalta.com/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Conocenos.png"></a>
<ul>
<li><a href="http://farmaciaciudadalta.com/conocenos/">Nuestros Comienzos</a></li>
<li><a href="http://farmaciaciudadalta.com/donde-estamos/">Dónde Estamos</a></li>
<li><a href="http://farmaciaciudadalta.com/horario/">Nuestro Horario</a></li>
</ul>
</li>
<li><a href="http://farmaciaciudadalta.com/farmacias-de-guardia/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Guardias.png"></a>
<ul>
<li><a href="http://farmaciaciudadalta.com/farmacias-de-guardia/">Nuestras Guardias</a></li>
<li><a href="http://farmaciaciudadalta.com/buscar-farmacia-de-guardia/">Buscar Farmacia de Guardia</a></li>
</ul>
<li><a href="http://farmaciaciudadalta.com/servicios/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Farmaceutico.png"></a>
<ul>
<li><a href="http://farmaciaciudadalta.com/material-ortopedico/">Alquiler/Venta Material Ortopédico</a></li>
<li><a href="http://farmaciaciudadalta.com/cabina-de-estetica/">Cabina de Estética</a></li>
<li><a href="http://farmaciaciudadalta.com/cabina-de-masaje/ ">Cabina de Masaje</a></li>
<li><a href="http://farmaciaciudadalta.com/deshabituacion-tabaquica/">Deshabituación Tabaquica</a></li>
<li><a href="http://farmaciaciudadalta.com/empaquetado-de-regalos/">Empaquetado de Regalos</a></li>
<li><a href="http://farmaciaciudadalta.com/nutricionista/">Nutricionista</a></li>
<li><a href="#">Servicio de Pesa</a></li>
<li><a href="#">Servicio de Tensiómetro</a></li>
<li><a href="#">Tarjeta de Fidelización</a></li>
</ul>
</li>
<li><a href="http://farmaciaciudadalta.com/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Productos.png"></a>
<ul>
<li><a href="">EFP</a></li>
<li><a href="">Dermofarmacia</a></li>
<li><a href="">Dietética</a></li>
<li><a href="">Higiene Corporal</a></li>
<li><a href="">Higiene Capilar</a></li>
<li><a href="">Zona Infantil</a></li>
<li><a href="#">Solares</a></li>
<li><a href="#">Higiene Íntima</a></li>
</ul>
</li>
<li><a href="http://farmaciaciudadalta.com/contacta/ "><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Contactar.png"></a></li>
<li><a href="http://farmaciaciudadalta.com/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/informacion.png"></a>
<ul>
<li><a href="http://farmaciaciudadalta.com/buscar-farmacia-de-guardia/">Buscar Farmacia de Guardia</a></li>
<li><a href="http://farmaciaciudadalta.com/calendario-de-vacunacion/">Calendario de Vacunación</a></li>
</ul>
</ul>
Y en CSS:
ul.menu {
display:inline;
margin-top: 0px;
list-style-type:none;
}
.menu li {
line-height:18px;
font-size:13px;
position:relative;
float:left;
z-index: 400;
}
.menu li a {
color: #000;
text-transform:uppercase;
padding: 5px 22px;
text-decoration:none;
}
.menu li a:hover {
background: #9144ac;
color: white;
}
.menu li ul {
display:none;
position:absolute;
top:80px;
width: 225px;
background-color: #dd752d;
padding: 0px;
list-style-type:none;
}
.menu li ul li {
width: 180px;
border: 4px solid #65289d;
border-top:none;
padding: 10px 20px;
}
.menu li ul li:first-child {
border-top: 2px solid #f26b3a;
}
.menu li ul li a {
width: 240px;
margin: 0;
padding:0;
}
.menu li ul li a:hover {
width: 240px;
margin: 0;
color: #9c0101;
background:none;
}
Gracias de antemano por la ayuda. |