slide menu jquery

[vorox]

Hola amigos! Quiero hacer un menu con su correspondiente submenu escondido y que al pasar por el elemento del menu principal aparezca con un efecto jquery de slide:

Mi código es:

<ul>
<li><a href="#">Menu1</a> |</li>
<li>
<a href="#">Menu2</a>
<ul class="submenu">
<li><a href="#">Menu2.1</a></li>
<li><a href="#">Menu2.2</a></li>
</ul>
</li>
</ul>

<script>


$(function () {
$('li').hover(function () {
$(this).('.submenu').slideToggle('slow');
})
});

</script>

Y en el css:

nav ul{
margin-top:55px;
}
nav ul li{
float:left;
margin-right: 3px;
position: relative;
}
nav ul li a{
color:#333;
padding: 5px 20px 5px 20px;
text-decoration: none;
}
nav ul li a:hover{
border-bottom: 1px solid #700;
color:#700;
}

nav ul li:hover .submenu{
display: block;
}

.submenu{
display:none;
position:absolute;
top:-35px;
}

.submenu a{
padding: 10px 20px 10px 20px;
background-color: white;
display: block;
width: 120px;
text-align: center;
}


El tema es que si en la función jquery quito 'this' (quedando asi):

<script>


$(function () {
$('li').hover(function () {
$('.submenu').slideToggle('slow');
})
});

</script>

El efecto funciona pero pasando por cualquiera de los elementos del menú y no solamente por el que debe ser.

¿A que se debe esto? ¿Pueden ayudarme?

Gracias de antemano.

[David]

Prueba así:

Código Javascript:

$(this).find('.submenu').slideToggle('slow');
 

[vorox]

Gracias David por tu respuesta, ahora funciona pero al revés!!!! jeje Cuando paso por el elemento del menu desaparece y cuando salgo del elemento aparece!!

Como puede ser esto??

[vorox]

Me autorespondo, quitando la sentencia del CSS:

nav ul#menu li:hover .submenu{
display: block;
}

Porque no es necesario esto?? Porque estaba convencido de que si...

[David]

No es necesario porque el método slideToggle ya se encarga de asignar el display correspondiente.