なかなか良さそうだったのでメモ。
例によってIE6は上手く実装できて
いませんでしたが、cssハックでも
使えばなんとかなるかな・・見た目
もクールで素敵なのでどこかで
使いたいです。

マウスオーバーすると右側は横へスライドしてパネルがドロップダウンします。アニメーションはjQueryで実装しているみたいなのでIE7,8等でも滑らかに動いてくれます。css3で動かしてるとIE全部だめですからね・・

Large Drop Down Menu

dorop01
見た目も素敵。ドロップダウンしてくるメニューもデザインされているのでなかなか使う場面もありそうです。IE6では表示が崩れていましたが、動きそのものは実装出来ていたのでcssだけ対応すればなんとかなりそうな予感です。

dorop02
マウスを乗せていない状態です。普通のメニューですが、マウスを乗せることで項目がスライドしますよ。ユーザーにとっても分かりやすそうですね。

jQueryは以下を書くだけ。

$(function() {
				/**
				 * the menu
				 */
				var $menu = $('#ldd_menu');

				/**
				 * for each list element,
				 * we show the submenu when hovering and
				 * expand the span element (title) to 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);
					});
				});
            });

以下よりデモをDL出来ます。※ページ下部

Large Drop Down Menu