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

Иногда заказчики просят сделать горизонтальное меню, которое отодвигает контент, при раскрытии. Раньше я перемещал выпадающую часть за меню и показывал его таким образом. Все работало отлично, но минус этого способа в том, что для вроде бы простой реализации нужно было написать много 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});
});
...

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

Почитав комментарии решил сделать еще два примера:
в первом добавил плавности jsbin.com/amowup/1,
второй сделал на чистом CSS jsbin.com/ekuput/37 (в этом случае плавность и прочую «красоту» добавить сложнее).

От критиков адекватного примера так и не увидел.