Small script help

Hello everyone,

I got this small script using jQuery that slides down a <ul> when an image is clicked. I was wondering how I could make the ul slide back when the mouse moves away from it and not demand from the user to click on the image again. I tried changing click() to mouseover() but that of course doesn't take into account the ul.

<script type="text/javascript">
$(document).ready(function () {
$('img.menu_class').click(function() {
$('ul.the_menu').slideToggle('medium');
});

});


Thanks in advance!

This would hide the menu on mouseout in addition to your click event:

$('img.menu_class').mouseleave(function() {
$('ul.the_menu').slideUp('medium');
});