Javascript-форум - Выпадающие меню

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

<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);
					});
			});
		});

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