Посмотреть демо-версию.

Итак, идея в том, что наводя на нужный пункт меню «вываливаются» подпункты этого самого меню. Выглядит довольно симпатично, и что важно, юзабилити не подпорчено. Меню достаточно большое, занимает пол экрана, мимо не промахнешься
На самом деле на примере показано меню на сайте некоей строительной компании, которая занимается «всем и вся». В каждом конкретном случае пункты меню, естественно, можно подобрать свои.

Реализовывать можно по-разному, приведем пример своей реализации. Начнем с того, что разместим 4 блока с фоновой картинкой и названием пункта меню, каждый в своей цветовой гамме. Здесь все в ваших руках, решение будет зависеть от вашего желания творить и разнообразить. Далее сразу же подготовим «выпадающие» картинки. Желательно, чтобы изображение аккуратно «пропадало» сверху вниз, т.е. становилось прозрачным (делается легко с помощью градиента и маски в шопе). Однако, если не хотите проблем с IE6, можно обойтись без прозрачности.

После проделанных операций с картинками перейдем к верстке. Как мы уже сказали, 4 блока, внутри каждого еще по блоку, причем с относительным позиционированием.

 1 <div id="menu">
 2   <div id="m1">
 3     <div class="mover1"></div>
 4   </div>
 5   <div class="divider"></div>
 6   <div id="m2">
 7     <div class="mover2"></div>
 8   </div>
 9   <div class="divider"></div>
10   <div id="m3">
11     <div class="mover3"></div>
12   </div>
13   <div class="divider"></div>
14   <div id="m4">
15     <div class="mover4"></div>
16   </div>
17 </div>

Упростим себе жизнь, воспользуемся jquery. При наведении на каждый из четырех блоков, у нас сверху вниз будет появляться приготовленная картинка, поверх которой и будут наши пункты меню. Воспользуемся функцией animate() из API Jquery, чтобы все смотрелось аккуратно. Скрипт будет выглядеть примерно так:

 1 $(document).ready(function() {
 2     $('#m1').mouseenter(function() {
 3       $('.mover1').animate({
 4         'top': "0px",
 5       }, 800);
 6     }).mouseleave(function() {
 7       $('.mover1').animate({
 8         'top': "-160px",
 9       }, 400);
10     });
11 
12         ...
13 
14 });

Для блоков m1, m2, m3, m4 при наведении курсора будет меняться значение top внутренних блоков, поскольку они позиционированы относительно. Таким образом, внутренние «дивы» будут выезжать из потолка=). Осталось немножко поколдовать со стилями и добавить нужные пункты меню. Здесь есть простор для ваших фантазий. У нас получилось такое весьма интересное решение поставленной задачи:

Демо-версия «выпадающего» меню.  |  Скачать проект целиком.