Выпадающий вверх список

1. CSS

.wrapper {
	height: 30px;
	line-height: 30px;
	width: 200px;
	float: left;
	clear: both;
	position: relative;
	margin: 10px;
	font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	}
.itemMain {
	color: #fff;
	z-index: 10;
	border: 1px solid #333;
	background-color: #777;
	background-repeat: no-repeat;
	background-position: 95% 50%;
	cursor: pointer;
	text-align: left;
	text-indent: 10px;
	width: 200px;
	position: absolute;
	top: 0px;
	left: 0px;
	text-shadow: 1px 1px 1px #000;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	}
.down {
	background-image: url(down.png);
	}
.up{
	background-image: url(up.png);
	}
.wrapper ul {
	list-style: none;
	padding: 2px 0px 0px 0px;
	width: 100%;
	position: absolute;
	bottom: 30px;
	left: 0px;
	}
.wrapper ul li a {
	text-decoration: none;
	cursor: pointer;
	display: block;
	padding: 3px 0px;
	line-height: 20px;
	text-indent: 10px;
	letter-spacing: 1px;
	color: #ddd;
	background-color: #525252;
	border: 1px solid #333;
	margin: 3px 0px;
	text-shadow: 1px 1px 1px #000;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background:
		-webkit-gradient (
		linear,
		left bottom,
		left top,
		color-stop(0.12, rgb(51,51,51)),
		color-stop(0.56, rgb(82,82,82))
		);
	background:
		-moz-linear-gradient (
		center bottom,
		rgb(51,51,51) 12%,
		rgb(82,82,82) 56%
		);
	-moz-box-shadow: 0px 0px 2px #333 inset;
	-webkit-box-shadow: 0px 0px 2px #333 inset;
	box-shadow: 0px 0px 2px #333 inset;
	}
.wrapper ul li a:hover {
	background: #333;
	color: #fff;
	-moz-box-shadow: 0px 0px 3px #ddd inset;
	-webkit-box-shadow: 0px 0px 3px #ddd inset;
	box-shadow: 0px 0px 3px #ddd inset;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	$(function() {
		$('#ui_element').find('li').hide();
		$('#ui_element').find('.itemMain').toggle(
			function(){
				var $this 	= $(this);
				$this.addClass('down').removeClass('up');
				var $menu	= $this.prev();
				var t = 50;
				$($menu.find('li').get().reverse()).each(function(){
					var $li = $(this);
					var showmenu = function(){$li.show();};
					setTimeout(showmenu,t+=50);
				});
			},
			function(){
				var $this 	= $(this);
				$this.addClass('up').removeClass('down');
				var $menu	= $this.prev();
				var t = 50;
				$($menu.find('li').get().reverse()).each(function(){
					var $li = $(this);
					var hidemenu = function(){$li.hide();};
					setTimeout(hidemenu,t+=50);
				});
			}
		);
	});
</script>

4. HTML

<div id="ui_element" class="wrapper">
	<ul>
		<li><a href="#">Пункт №1</a></li>
		<li><a href="#">Пункт №2</a></li>
		<li><a href="#">Пункт №3</a></li>
		<li><a href="#">Пункт №4</a></li>
		<li><a href="#">Пункт №5</a></li>
		<li><a href="#">Пункт №6</a></li>
		<li><a href="#">Пункт №7</a></li>
		<li><a href="#">Пункт №8</a></li>
		<li><a href="#">Пункт №9</a></li>
		<li><a href="#">Пункт №0</a></li>
	</ul>
	<div class="itemMain up">Меню</div>
</div>

5. Изображения