[Алек]

Доброго всем времени суток!
Вот делаю меню со всплывающим списком:

$('#butt_1').hover(function(){
	nova('#butt_1');
	$('#for_theme').slideDown(500);
},function(){
$('#for_theme').slideUp(500);
});

	function nova (x){
		$('#for_theme').css({'width':$(x).width() + 19});
	};

Здесь такая проблема: при событии hover список выплывает, но пощёлкать по нему нельзя, так как если я навожу на него курсор, список убирается!
Надо как-то сделать, чтоб на него тоже распространялась функция и его можно было покликать.
Вот html код:

<div id="tr_3">
	<div id="for_tr_3">
			<ul>
				<li><a href="#" id="butt_1" class="button2">Home</a></li>
				<li><a href="#" class="button2">About Us</a></li>
				<li><a href="#" class="button2">Contact</a></li>
				<li><a href="#" class="button2">Busines</a></li>
				<li><a href="#" class="button2">Development</a></li>
				<li><a href="#" class="button2">Blog</a></li>
			</ul>
			<div class="clear"></div>	
	</div>		
			<div id="for_theme">
				<ul>
					<li><a href="#">Theme 1</a></li>
					<li><a href="#">Theme 2</a></li>
					<li><a href="#">Theme 3</a></li>
					<li><a href="#">Theme 4</a></li>
					<li><a href="#">Theme 5</a></li>
				</ul>
			</div>
	</div>

Как такое можно провернуть?
Заранее большое всем спасибо!