En muchas ocasiones necesitamos crear menús que disponen de una gran cantidad de subelementos y esto hace realmente dificil asignarlos en una sola columna. La solución es agruparlos en varias columnas que a su vez sean simples listas incluidas en una sección que visualizamos.

En el ejemplo funcional superior demostramos como cada uno de los elementos se va a mostrar expandiendo la sección en curso y desplazando hacia abajo el contenido del submenú.

EL HTML

El código necesario es bastante simple, creamos una lista desordenada y dentro de cada uno de los elementos vamos a incluir una sección div que a su vez va a contener las distintas listas desordenadas de links

<ul id="ldd_menu" class="ldd_menu">
    <li><span>Vacations</span><!-- Increases to 510px in width-->
    <div class="ldd_submenu">
    <ul>
        <li class="ldd_heading">By Location</li>
        <li><a href="#">South America</a></li>
        <li><a href="#">Antartica</a></li>
        <li><a href="#">Africa</a></li>
        <li><a href="#">Asia and Australia</a></li>
        <li><a href="#">Europe</a></li>
    </ul>
    <ul>
        <li class="ldd_heading">By Category</li>
        <li><a href="#">Sun &amp; Beach</a></li>
        <li><a href="#">Adventure</a></li>
        <li><a href="#">Science &amp; Education</a></li>
        <li><a href="#">Extreme Sports</a></li>
        <li><a href="#">Relaxing</a></li>
        <li><a href="#">Spa and Wellness</a></li>
    </ul>
    <ul>
        <li class="ldd_heading">By Theme</li>
        <li><a href="#">Paradise Islands</a></li>
        <li><a href="#">Cruises &amp; Boat Trips</a></li>
        <li><a href="#">Wild Animals &amp; Safaris</a></li>
        <li><a href="#">Nature Pure</a></li>
        <li><a href="#">Helping others &amp; For Hope</a></li>
        <li><a href="#">Diving</a></li>
    </ul>
    <a class="ldd_subfoot" href="#"> + New Deals</a></div>
    </li>
    <li><span>Equipment</span>
    <div class="ldd_submenu">
    <ul>
        <li class="ldd_heading">By Location</li>
        <li><a href="#">South America</a></li>
        <li><a href="#">Antartica</a></li>
        <li><a href="#">Africa</a></li>
        <li><a href="#">Asia and Australia</a></li>
        <li><a href="#">Europe</a></li>
    </ul>
    <ul>
        <li class="ldd_heading">By Category</li>
        <li><a href="#">Sun &amp; Beach</a></li>
        <li><a href="#">Adventure</a></li>
        <li><a href="#">Science &amp; Education</a></li>
        <li><a href="#">Extreme Sports</a></li>
        <li><a href="#">Relaxing</a></li>
        <li><a href="#">Spa and Wellness</a></li>
    </ul>
    <ul>
        <li class="ldd_heading">By Theme</li>
        <li><a href="#">Paradise Islands</a></li>
        <li><a href="#">Cruises &amp; Boat Trips</a></li>
        <li><a href="#">Wild Animals &amp; Safaris</a></li>
        <li><a href="#">Nature Pure</a></li>
        <li><a href="#">Helping others &amp; For Hope</a></li>
        <li><a href="#">Diving</a></li>
    </ul>
    <a class="ldd_subfoot" href="#"> + New Deals</a></div>
    </li>
</ul>

Pocas explicaciones necesitamos sobre este modelo de menú, vamos con la parte que realmente nos ayuda a generar este menú visualmente

La CSS

Lo básico y genérico de la lista será este estilo que define el fondo, color, fuente, margenes, etc... solo anotar la importancia del display:block para que los elementos se agrupen y como es lógico retirar el estilo de UL para la lista (list-style)

ul.ldd_menu{
	margin:0px;
	padding:0;
	display:block;
	height:50px;
	background-color:#D04528;
	list-style:none;
	font-family:"Trebuchet MS", sans-serif;
	border-top:1px solid #EF593B;
	border-bottom:1px solid #EF593B;
	border-left:10px solid #D04528;
	-moz-box-shadow:0px 3px 4px #591E12;
	-webkit-box-shadow:0px 3px 4px #591E12;
	-box-shadow:0px 3px 4px #591E12;
}

También quitamos la decoración de subrayado en el link

ul.ldd_menu a{
	text-decoration:none;
}

Importante que cada uno de los elementos de lis lista floten a la izquierda y marquen una posición relativa a ellos para el posterior dropdown.

ul.ldd_menu > li{
	float:left;
	position:relative;
}

Asignamos más propiedades de aspecto a los elementos de lista como span

ul.ldd_menu > li > span{
	float:left;
	color:#fff;
	background-color:#D04528;
	height:50px;
	line-height:50px;
	cursor:default;
	padding:0px 20px;
	text-shadow:0px 0px 1px #fff;
	border-right:1px solid #DF7B61;
	border-left:1px solid #C44D37;
}

Los elementos del submenu los definimos como posiciones absolutas respecto al anterior menú relativo

ul.ldd_menu .ldd_submenu{
	position:absolute;
	top:50px;
	width:550px;
	display:none;
	opacity:0.95;
	left:0px;
	font-size:10px;
	background: #C34328;
	border-top:1px solid #EF593B;
	-moz-box-shadow:0px 3px 4px #591E12 inset;
	-webkit-box-shadow:0px 3px 4px #591E12 inset;
	-box-shadow:0px 3px 4px #591E12 inset;
}

Texto inferior del menú

a.ldd_subfoot{
	background-color:#f0f0f0;
	color:#444;
	display:block;
	clear:both;
	padding:15px 20px;
	text-transform:uppercase;
	font-family: Arial, serif;
	font-size:12px;
	text-shadow:0px 0px 1px #fff;
	-moz-box-shadow:0px 0px 2px #777 inset;
	-webkit-box-shadow:0px 0px 2px #777 inset;
	-box-shadow:0px 0px 2px #777 inset;
}

Las listas desordenadas contenidas sobre la primera lista del menú principal

ul.ldd_menu ul{
	list-style:none;
	float:left;
	border-left:1px solid #DF7B61;
	margin:20px 0px 10px 30px;
	padding:10px;
}
li.ldd_heading{
	font-family: Georgia, serif;
	font-size: 13px;
	font-style: italic;
	color:#FFB39F;
	text-shadow:0px 0px 1px #B03E23;
	padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
	font-family: Arial, serif;
	font-size:10px;
	line-height:20px;
	color:#fff;
	padding:1px 3px;
}

Ya solo nos falta asignar una propiedad al evento del ratón sobre el link del submenú

ul.ldd_menu ul li a:hover{
	-moz-box-shadow:0px 0px 2px #333;
	-webkit-box-shadow:0px 0px 2px #333;
	box-shadow:0px 0px 2px #333;
	background:#AF412B;
}

En general la hoja de estilos no destaca nada nuevo ni realmente novedoso, es una sencilla hoja que nos ayuda a montar un menú en bloques y un submenú de elementos UL también en bloques.

Vamos con lo importante, los efectos de deslizamiento y emerger el texto de submenú

El Javascript

En este ejemplo el script necesario es simple, pero no por ello menos funcional

$(function() {
				/**
				 * El menu
				 */
				var $menu = $('#ldd_menu');
				
				/**
				 * para cada elemento de la lista,
				 * mostramos el submenu al estar HOVER y
				 * expandimos el elemento (title) a 510px
				 */
				$menu.children('li').each(function(){
					var $this = $(this);
					var $span = $this.children('span');
					$span.data('width',$span.width());
					
					$this.bind('mouseenter',function(){
						$menu.find('.ldd_submenu').stop(true,true).hide();
						$span.stop().animate({'width':'510px'},300,function(){
							$this.find('.ldd_submenu').slideDown(300);
						});
					}).bind('mouseleave',function(){
						$this.find('.ldd_submenu').stop(true,true).hide();
						$span.stop().animate({'width':$span.data('width')+'px'},300);
					});
				});
            });

Realmente sencillo este script, tan solo necesitamos jQuery como framework y ya disponemos de un menú dropdown de varias columnas.

Este ejemplo fue extraido de CoDrops y creado por Mary Lou, el ejemplo completo del menú funcionando: DEMO STAND ALONE