Выпадающее меню с определенной высотой!
 

Вообщем структура сайта примерно такая

ШАПКА
КОНТЕНТ
ТУТ СНИЗУ ФИКСИРОВАННОЕ МЕНЮ
>>>> тут контент!

http://ruseller.com/lessons/les558/example/index.html

Вот так у меня фиксированное меню выезжает!
Мне надо чтоб оно выезжало так, чтоб не закрывало шапку!
Допустим мы прокрутили по контенту 1000px! Навели на меню оно выехало!
Но только на ту высоту чтоб не выше шапки! Думаю объяснил правильно)

Вот так я его вывожу)

$('#button_menu').click(function(){
				var easing = 'easeInSine';
				var height_bc=$("#bottom_content").css('height').replace("px","");
				alert(height_bc);
				if (height_bc<10){
					$('#button_menu').attr('src','img/bot.png');
					$('#bottom_content').animate({'height' : 500}, {queue:false, duration:1000, easing: easing});
				}else{			
					$('#button_menu').attr('src','img/top.png');
					$('#bottom_content').animate({'height' : 0}, {queue:false, duration:1000, easing: easing});
				}
			});

Щас в бине накидаю структурку)

<style>
#bottom{
background-color:orange;
height:10px;
width:100%;
position:fixed;
bottom:0px;
}
#bottom:hover{
height:500px;
}
</style>
<div id='logo'>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'>
</div>
<div id='bottom'>

</div>

Тут я продемострировал через css hover! У меня выезжает меню через js! И закрывает лого! А мне надо до лого! НЕ могу просто jquery подключить) т. к. нельзя!

Поднять Лого выше

<style>
* { 
margin:0;
padding:0;
}
#bottom{
background-color:orange;
height:10px;
width:100%;
position:fixed;
 z-index:500;
bottom:0px;
}
#bottom:hover{
height:500px;
}
#logo {
 position:relative;
 z-index:10000;
}
</style>

<div id='logo'>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'>
</div>
<div id='bottom'>
<div>