Вспывающий список
 

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

$('#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>

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

Разметку нормальную сделать...

Смотри как люди делают...

Значит разметку нормальную сделать? Отлично, сделаю сначала чисто на css, а потом уже подумаю, какие эффекты пристроить.

ЗЫ. Посмотрел пример разметки, всё сразу стало ясно и понятно, спасибо!:)