Jquery dropdownmenu

[Skullzy]

I've created a simple dropdown menu using jquery.

here is the HTML

<div id="button">
<div style="background:url(images/button1.png); width: 184px; height: 32px;" class="menu_class"></div>
<ul class="the_menu" tabindex="1">
<li><a href="#" name="website1">A Website #1</a></li>
<li><a href="#" name="website2">A Website #2</a></li>
<li><a href="#" name="website3">A Link #1</a></li>
<li><a href="#" name="website4">A Link #2</a></li>
<li><a href="#" name="website5">A Website #3</a></li>
<li><a href="#" name="website6">A Website #4</a></li>
<li><a href="#" name="website7">A Link #3</a></li>
<li><a href="#" name="website8">A Link #4</a></li>
</ul>
</div>

Here is the jquery bit

$(document).ready(function () {
    $('div.menu_class').click(function () {
		$('ul.the_menu').slideToggle('medium');
	});
	$('a').click( function() {
		var VALUE = $(this).attr('name');
		$('div.menu_class').html(VALUE);
		$('ul.the_menu').slideToggle('medium');
	});
	$('#button').blur( function() {
		$('ul.the_menu').slideToggle('medium');
	});
});

What am trying to do is on click of the (a) for it to display the selected link in the menu_class now this works but what am having issue's with is that i want to also beable to close the menu down on blur or onmouseout.

I attempted the on mouseout and didn't work well it kept closing it down when i went to hover over one of the menu links

but onblur works perfectly if i click off the menu but the issue is that i cant use the fallowing two codes together

        $('a').click( function() {
		var VALUE = $(this).attr('name');
		$('div.menu_class').html(VALUE);
		$('ul.the_menu').slideToggle('medium');
	});
	$('#button').blur( function() {
		$('ul.the_menu').slideToggle('medium');
	});

if i remove the blur one it will make the text for what ever link i click show in the menu_class part but if i add the blur it wont display the selected link am not sure how to fix this but i hope someone can help.

thank you in advance