bind mouseleave slideDown - only animates once

[markjson]

Hi,

I am trying to develop a top menu with a dropdown submenu, triggered slideDown upon hovering over #topmenu li; and triggered slideUp upon mouseleave #topmenu li as well as .about us.

I need to have ul.submenu separate as opposed to nested into ul#topmenu due to z-index issues.

Here is the HTML:

        <ul id="topmenu">
        	<li id="aboutus"><a id="test" href="/about-us">about us</a>
            </li>
        </ul><!-- topmenu -->

       	<ul class="submenu aboutus">
           	<li><a href="/vision">vision</a></li>
           	<li><a href="/testimonials">testimonial</a></li>
	</ul>

And here is the jQuery:

	// Dropdown menu behaviour
	$("#topmenu li").hover(function(){
		var curclass='.' + $(this).attr('id');
		$(curclass).slideDown();
	}, function(){
		var curclass='.' + $(this).attr('id');
		$(this).add(curclass).bind('mouseleave',function(){
				$(curclass).slideUp();
		});
	});

Now, this works perfectly the first time I hover over it.

However, the next time I hover over #topmenu li, as soon as the mouseleaves #topmenu li, .submenu slides up.

The strange thing is that it works perfectly the first time, but fails the second time and thereafter.

Is there an issue with bind? or mouseleave?

Thanks in advance!