Отображение и скрытие элементов UL
 

Здравствуйте уважаемые знатоки! Нужна помощь!
Задача в следующем:
При наведений мыши на вторую ссылку отображается ее содержимое из UL
Изначально первая ссылка и содержимое из UL(первого) отображены!
У меня есть пример, но он работает не правильно. Jquery не знаю
Может, сможете помочь?!
все стили не привожу в примере
Css:

.box {display: none;}
.box.visible {display: block;}
li.current {
	color: #fff;
	background: #000;
	
}

HTML:

<div class="vertical">
	<ul class="tabs">
	<li class="current">Первая ссылка</li> 	 
  <ul class="box visible"">
	<li>Пример</li>
	</ul>
  <li>Вторая ссылка</li>
	<ul class="box">
	<li>Пример 2</li>
	</ul>
</ul>
</div>

JQuery

(function($) {
$(function() {

	$('ul.tabs').delegate('li:not(.current)', 'mouseover', function() {
		$(this).addClass('current').siblings().removeClass('current')
			  .parent('ul').find('ul.box').hide().eq($(this).index()).fadeIn("slow");
	})

})
})(jQuery)

И структура HTML важна, единственно могу div поставить пред UL class="box"