Меню, которое отодвигает контент

Иногда заказчики просят сделать горизонтальное меню, которое отодвигает контент, при раскрытии. Раньше я перемещал выпадающую часть за меню и показывал его таким образом. Все работало отлично, но минус этого способа в том, что для вроде бы простой реализации нужно было написать много javascript кода.

Появилась идея реализовать это эффект по-другому.

1. HTML

Ничего не меняем, обычное меню:

<ul class="nav"> 	<li><a href="/">Lorem</a></li> 	<li> 		<a href="/">Lorem</a> 		<ul> 			<li><a href="/">Lorem ipsum</a></li> 			<li><a href="/">Lorem ipsum</a></li> 			<li><a href="/">Lorem ipsum</a></li> 		</ul> 	</li> 	... </ul> 

2. CSS

Ставим контейнеру высоту и “overflow:hidden”.

.nav{ 	overflow:hidden; 	height:24px; 	position:relative; } 

Подменю вешаем на “position:absolute” и скрываем с помощью “visibility:hidden”.

.nav ul{ 	position:absolute; 	left:0; 	right:0; 	top:24px; 	visibility:hidden; } 

3. Javascript

Перебираем элементы первого уровня и узнаем высоты их подменю.

$nav.children('li').each(function(){ 	var $this = $(this), 		height = $this.children('ul').outerHeight();	 	... }); 

На hover по элементу ставим меню нижний padding в размере высоты нужного нам подменю, которое показываем.

... $this.hover(function(){ 	$this.addClass('over'); 	$nav.css({paddingBottom:height}); }, function(){ 	$this.removeClass('over'); 	$nav.css({paddingBottom:0}); }); ... 

Вот собственно и все. Готовый результат можно посмотреть тут. Жду критику и Ваши варианты.