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>
<script type="text/javascript">
$(function() {
$('.slider').jslider({
btnNext: ".next",
btnPrev: ".prev"
});
});
</script>
<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">
[contenido no disponible]
<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>
<div id="menu">
<ul id="nav">
INICIO
FORO
LEGISLACIÓN
<ul class="submenu">
ley general
Ley de garantia
Constitución española
NOTICIAS
<ul class="submenu">
Noticias 2010
Noticias 2009
<li class="contacto">CONTACTO
</div>
<div id="galeria">
<div class="slider">
<ul class="imagenesslider">
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
</div>
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}
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>
<script type="text/javascript">
$(function() {
$('.slider').jslider({
btnNext: ".next",
btnPrev: ".prev"
});
});
</script>
<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">
[contenido no disponible]
<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>
<div id="menu">
<ul id="nav">
<ul class="submenu">
<ul class="submenu">
<li class="contacto">CONTACTO
</div>
<div id="galeria">
<div class="slider">
<ul class="imagenesslider">
[contenido no disponible]
[contenido no disponible]
</div>
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}