Sigo con mi problemita de Menu

[ContactarNET]

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:

<ul id="nav">
    <li><a href="#">Menu 1</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 2</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
        </ul>
    </li>
</ul>
 

al css le agregaste esto.

Código CSS:

a{
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:

<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:

$(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);
        }
    );          
});
 

NOTA: 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.