Buenas, estoy montando una pagina en la que he puesto un menu desplegable arriba (header) y debajo un Slider que va pasando una serie de fotografías.
Ambos funcionan bien por separado, pero al montarlos juntos, no consigo que el menu vaya por encima (tiene una transparencia del 80%) del Slider y que se vean completos.
He probado con las hojas de estilo, con el HTML, cambiando el orden de los divs a ver si conseguia que se viera bien, pero nada.
No se si será un problema de incompatibilidad de los dos jquery usados.
El problema, que es que el menu se corta a la altura que empieza el Slider.
Agradeceria cualquier ayuda, ya que me estoy voviendo loco con esto y no consigo solucionarlo.
Este es el html:
<link href="css/dyho-style.css" rel="stylesheet" type="text/css" />
<link href="css/dyho-layout.css" rel="stylesheet" type="text/css" />
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
var el = document.getElementsByTagName("body")[0];
el.className = "";
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
pause: 3000,
});
});
</script>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<noscript>
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
</noscript>
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie.css">
<link rel="stylesheet" href="css/ie7.css">
<![endif]-->
</head>
<body id="page1" class="no-js">
<div id="main">
<!-- start container -->
<div id="container">
<!-- start slider -->
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/foto_intro_1.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/foto_intro_2.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
<!-- end slider --></div>
<!-- end container --></div>
<!-- header -->
<div id="header">
<div class="row-1">
<div class="wrapper">
<div class="logo">
<!-- start phones -->
<div class="phones">
T. 952 865 618
<a href="mailto:
[email protected]">
[email protected] </a>
<!-- end phones --></div>
<!-- start topNav -->
<nav id="topNav">
<ul>
<li><a href="empresa.html" title="">EMPRESA</a></li>
<li>
<a href="productos.html" title="">PRODUCTOS
<ul>
<li><a href="mueblescocina.html" title="">Muebles de Cocina</a></li>
<li><a href="electrodomesticos.html" title="">Electrodomésticos</a></li>
<li><a href="complementos.html" title="">Complementos de cocina</a></li>
<li><a href="armarios.html" title="">Armarios / Vestidores</a></li>
<li class="last"><a href="baños.html" title="">Muebles de baño</a></li>
</ul>
</li>
<li><a href="servicios.html" title="">SERVICIOS</a>
<ul>
<li><a href="particulares.html" title="">Particulares</a></li>
<li><a href="profesionales.html" title="">Profesionales</a></li>
<li class="last"><a href="distribucion.html" title="">Canal Distribución</a></li>
</ul>
</li>
<li><a href="promociones.html" title="">PROMOCIONES</a>
<ul>
<li><a href="oferta-cocinas.html" title="">Oferta Cocinas</a></li>
<li><a href="oferta-armarios.html" title="">Oferta armarios</a></li>
<li class="last"><a href="otras-ofertas.html" title="">Otras Ofertas</a></li>
</ul>
</li>
<li><a href="contacto.html" title="">CONTACTO</a></li>
</ul>
<!-- end topNav --></nav>
<!-- end logo --></div>
<!-- end header --></div>
<!-- footer -->
<!-- start footerWrap -->
<div id="footerWrap">
<img src="images/footer_BG.jpg" vspace="3"/>
<!-- end footerWrap --></div>
<!-- start footer -->
<div id="footer">
<ul class="nav">
<li><span>© 2011 DYHO Marbella</span></li>
<br /><br />
<li>Todos los derechos reservados</li>
<!-- start fright -->
<div class="fright"><strong><a href="http://www.artroom.es">DISEÑO WEB | THE ART ROOM</a></strong>
<!-- end fright --></div>
<!-- start fright2 -->
<div class="fright2"><li><a href="avisolegal_sp.html">Aviso legal</a>|</li>
<li><a href="privacidad_sp.html">Política de privacidad</a></li>
<!-- end fright2 --></div>
</ul>
<!-- end footer --></div>
<!-- end wrapper --></div>
<!-- end row1 --></div>
<script src="js/jquery-1.6.1.js"></script>
<script src="js/modernizr-2.0.3.js"></script>
<script>
(function($){
//cache nav
var nav = $("#topNav");
//add indicators and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul ul").length > 0) {
$("<span>").text("").appendTo($(this).children(":f irst"));
//show subnav on hover
$(this).mouseenter(function() {
$(this).find("ul ul").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function() {
$(this).find("ul ul").stop(true, true).slideUp();
});
}
});
})(jQuery);
</script>
</body>