mira yo te recomendaria hacer todo de 0, osea vos agarras tenes en tu html definido un div para tu menu, borras todo lo de adentro y solo dejas definido el div meun sin nada adentro, todo lo que esta hasta ahora, lo podes comentar, o borrar, da igual.
Ahora dentro de ese div que dejaste copia y pega esto:
Código HTML:
Ver original <li><a href="#">Menu 1
</a> <li><a href="#">Submenu 1
</a></li> <li><a href="#">Submenu 2
</a></li> <li><a href="#">Submenu 3
</a></li> <li><a href="#">Menu 2
</a> <li><a href="#">Submenu 1
</a></li> <li><a href="#">Submenu 2
</a></li> <li><a href="#">Submenu 3
</a></li> <li><a href="#">Menu 3
</a> <li><a href="#">Submenu 1
</a></li> <li><a href="#">Submenu 2
</a></li> <li><a href="#">Submenu 3
</a></li> <li><a href="#">Menu 4
</a> <li><a href="#">Submenu 1
</a></li> <li><a href="#">Submenu 2
</a></li> <li><a href="#">Submenu 3
</a></li>
al css le agregaste esto.
Código CSS:
Ver originala{
display: block;
text-decoration: none;
color: #004a80;
padding: 5px;
}
ul{
width: 500px;
height: 28px;
}
ul,li{
list-style: none;
margin:0;
padding:0;
}
#nav{
font-family: 'Century Gothic', sans-serif;
}
#nav li{
float:left;
position: relative;
width: 125px;
font-size: 14px;
font-variant: small-caps;
border-top:1px solid #004a80;
border-bottom:1px solid #004A80;
}
.submenu{
display: none;
position: absolute;
left: -1px;
border:none;
height: auto;
background: none;
}
#nav .submenu li{
float: none;
position: static;
margin: 0;
font-size: 11px;
font-variant: normal;
border: 1px solid #004a80;
border-top: none;
width: 124px;
}
#nav .submenu li a{
color: #FFFFFF;
background: #004a80 url('fondo_menu_vertical.png') repeat-x 0 0;
width: 114px;
height: 16px;
}
y por ultimo importamos los dos JS para que funcione el menu:
Código Javascript
:
Ver original<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="jquery.backgroundPosition.js"></script>
Luego, deberiamos crear un .js nuevo con el nombre. "jquery.backgroundPosition.js" que corresponde a la llamada de arriba, y dentro de el, ponemos este codigo:
Código Javascript
:
Ver original$(function(){
$('#nav>li').hover(
function(){
$('.submenu',this).stop(true,true).slideDown('fast');
},
function(){
$('.submenu',this).slideUp('fast');
}
);
$('.submenu li a').css( {backgroundPosition: "0px 0px"} ).hover(
function(){
$(this).stop().animate({backgroundPosition: "(0px -99px)"}, 250);
},
function(){
$(this).stop().animate({backgroundPosition: "(0px 0px)"}, 250);
}
);
});
En el ejemplo esta todo trabajo en la raiz del proyecto.
Probamos en navegador, y deberia andar perfecto, solo falta la foto de fondo que es esta:
http://www.davidrojas.net/demos/fondo_menu_desplegable.png
Que corresponde al estilo CSS. "background: #004a80 url('fondo_menu_vertical.png') repeat-x 0 0;"
Yo la implente en mi web de esta misma forma, y funciono a la perfeccion, depues tenes que darle el estilo que vos gustes, con tus fuentes etc. pero creo que ya sabes.
Espero que te ayude,
Saludos,
Gabriel.
Sigo con mi problemita de Menu 
Este tema le ha gustado a 1 personas