muy buenas.
He creado para mi web una nav bar con html, css y javascript.
pero debajo de la barra tengo una imagen que ocupa todo el ancho de la web.
la barra si funciona pero el submenu queda debajo de la magen y no se el por que.
Podeis ayudarme?
os dejo el codigo.
html
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript" src="js/jslider.js"></script>
<script type="text/javascript" src="js/searchbox.js"></script>
<!--controladores del slider de imagenes-->
<script type="text/javascript">
$(function() {
$('.slider').jslider({
btnNext: ".next",
btnPrev: ".prev"
});
});
</script>
<!--controlador del nav--->
<script type="text/javascript">
function mainmenu(){
// Oculto los submenus
$(" #nav ul ").css({display: "none"});
// Defino que submenus deben estar visibles cuando se pasa el mouse por encima
$(" #nav li").hover(function(){
$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
},function(){
$(this).find('ul:first').slideUp(400);
});
}
$(document).ready(function(){
mainmenu();
});
</script>
</head>
<body>
<div id="contenedor">
<a href="#"><img src="objetos/logotipo.jpg" width="339px" height="86px" alt="logo" class="logotipo" border="0"></a>
<div id="buscador">
<form id="buscar" method="post" action="">
<input type="text" id="s" value="¿buscas algo?" class="entrada" >
<input type="image" src="objetos/lupa.png" id="lupa" alt="buscar" title="Buscar" >
</form>
</div><!--fin de la caja de busqueda-->
<div id="menu">
<ul id="nav">
<li><a href="#">INICIO</a></li>
<li><a href="#">FORO</a></li>
<li><a href="#">LEGISLACIÓN</a>
<ul class="submenu">
<li><a href="legislacion/legislacion.html">ley general</a></li>
<li><a href="#">Ley de garantia</a></li>
<li><a href="#">Constitución española</a></li>
</ul>
</li>
<li><a href="#">NOTICIAS</a>
<ul class="submenu">
<li><a href="#">Noticias 2010</a></li>
<li><a href="#">Noticias 2009</a></li>
</ul>
</li>
<li class="contacto"><a href="#">CONTACTO</a></li>
</ul><!--final nav-->
</div>
<div id="galeria">
<div class="slider">
<ul class="imagenesslider">
<li><img src="objetos/imagen1.jpg" width="980px" height="309px" alt="imagen1" title="Pulsa para cambiar el lema sobre los botones" class="sliderimg"></li>
<li><img src="objetos/imagen2.jpg" width="980px" height="309px" alt="imagen2" title="Pulsa para cambiar el lema sobre los botones" class="sliderimg"></li>
</ul>
<img src="objetos/boton-izq.png"width="36px" height="36px" alt="boton izquierdo"title="Anterior" id="prev" class="prev">
<img src="objetos/boton-drcho.png"width="36px" height="36px" alt="boton derecho"title="siguiente" id="next" class="next">
</div><!--fin del slider-->
y el css.
/*=============navegacion========*/
* { padding:0px; margin:0px; }
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px; color:#333333;
}
#menu {
float:right;
background-image:url(objetos/nav_bg.png);
background-repeat:repeat-x;
height:30px;
width:500px;
margin-left:200px;
margin-top:3px;
padding-left:50px
}
#nav {
list-style:none;
}
#nav li {
float:left;
background-image:url(objetos/nav_li_bg.png);
background-repeat:no-repeat;
background-position: right 80%;
}
#nav li a {
display:block;
padding:7px 10px;
text-decoration:none;
color:#CCCCCC;
font-weight:bold;
}
#nav li a:hover {
color:#FFFFFF;
}
/* Submenu */
#nav ul.submenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333;}
#nav ul.submenu li { float:none; background-image:url('none'); border-bottom:1px solid #999999; width:150px}
/* Subsubmenu */
#nav ul.subsubmenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333; margin-left:150px; margin-top:-30px;}
#nav ul.subsubmenu li { float:none; background-image:url('none'); border-bottom:1px solid #999999; min-width:150px}
_________________
