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.