Выпадающие меню

[SolomonRei]

Добрый день.Нужно реализовать выпадающие меню,только необычное.

<div class = "rubricks-up">
				<div class = "rubriks-ico"></div>
				<div class = "rubricks-li-ico"></div>
				<ul>
					<li class = "rubricks-li li-text-position-1"><a href = "#main">Главная рубрика<p class = "li-text-2">"Файлы"</p></a></li>
					<li class = "rubricks-li li-text-position-2" style="display: none;"><a href = "#mods">Моды</a></li></li>
					<li class = "rubricks-li li-text-position-3" style="display: none;"><a href = "#patches">Патчи</a></li></li>
				</ul>
			</div>

.rubricks-up {
	width: 310px;
	height: 60px;
	border-radius: 5px;
	background-color: #0d0b0a;
	border: 1px solid #2f2f2f
}
.rubricks-menu {
	width: 292px;
	height: 50px;
	margin: 0px 0 0 8px;
	border: 2px solid red;
	background-color: #141110;
	border: 1px solid #25201f;
	border-top: none;
}

.rubricks-li {
	display: block;
	list-style-type: none;
}
.rubricks-li a {
	color: #ffffff;
	font-weight: bold;
	font-size: 15px;
	font-family: Albertus;
	margin: 18px 0 0 75px;
	float: left;
}
.li-text-2 {
	position: relative;
	color: #f5a43c;
	float: right;
	left: 5px;
}
.li-text-position-2 {
	position: relative;
	top: -10px;
}
.li-text-position-3 {
	position: relative;
	top: 20px;
	left: -116px;
}
.rubriks-ico {
	position: absolute;
	background: url('../images/rubrics-li-ico.png') center no-repeat;
	width: 45px;
	height: 41px;
	margin: 8px 0 0 8px;

}
.rubricks-li-ico {
	position: absolute;
	background: url('../images/rubrics-li.png') center no-repeat;
	width: 15px;
	height: 18px;
	margin: 18px 0 0 275px;
	cursor: pointer;
}

.wrap-news {
	width: 875px;
	height: 500px;
	margin: 0 0 0 325px;
	border-radius: 5px;
	background-color: #0d0b0a;
}

Картинки в описании.
Мне нужно,чтобы когда кликаешь на блок rubricks-li-ico,высота блока увеличивалась,и показывались остальные пункты меню.Затем когда выбираешь нужное,кликнув по нему,меню закрывается,а по тому,что кликнули перешло в самый вверх,то есть показалось,а остальное скрылось.
То,что я написал

var height = '150px';

	$(function() {
		$('.rubricks-li-ico, li:first-child').on('click', function() {
			$('.rubricks-li').fadeIn(800, function() {
				$('.rubricks-up').css('height', height);
					$('.rubricks-li').on('click', function() {
						var s = $(this).val();
						alert(s);
					});
			});
		});

Тут я хотел просто заменять,значение