This code works great and does exactly as it should, but there has to be a better way of doing this and I just can't figure out how!
I'm pretty new to jQuery and am trying to use it more myself instead of using plugins and I can get stuff to work fine. It just isn't the tidiest or neatest code, which I'm trying to move away from!
I've included a fiddle here just so you can see the functionality as it currently stands.
HTML
<ul>
<li>Example 1</li>
<li class="open">Example 2
<ul>
<li>Sub Example 2.1</li>
<li>Sub Example 2.2</li>
<li>Sub Example 2.3</li>
<li>Sub Example 2.4</li>
</ul>
</li>
<li class="open2">Example 3
<ul>
<li>Sub Example 3.1</li>
<li>Sub Example 3.2</li>
<li>Sub Example 3.3</li>
</ul>
<li>
</ul>
jQuery
var menu = $('li.open ul');
menu.css('display','none');
$('li.open')
.mouseenter(function(){
menu.slideDown(400);
})
.mouseleave(function(){
menu.slideUp(400);
});
var menu2 = $('li.open2 ul');
menu2.css('display', 'none');
$('li.open2')
.mouseenter(function(){
menu2.slideDown(400);
})
.mouseleave(function(){
menu2.slideUp(400);
});