Sliding menu

Hello, I have a problem and I dont know how to continue...
I have a menu with architecture:
--------------------------------------------------------------------
<div id="menu">
// button
<div class="menu_box">
<a href="#" style="display: block">
<div id="menu_about"></div>
<img src="about.jpg">
</a>
</div>
//end of button

// next button
<div class="menu_box">
<a href="#" style="display: block">
<div id="menu_offer"></div>
<img src="offer.jpg">
</a>
</div>
// ....etc
--------------------------------------------------------------------
there are images:


I want a function, which will expand the 0px div to for example 30px on mouseover, and on mouseout will return it back to 0px. I have problem with selecting this "0px div".
I wrote this, but this doesnt work:
--------------------------------------------------------------------
$(document).ready(function(){
$("#menu > div > a").click(function(){
$(this).blur();
});

$("#menu > div").mouseover(function(){
$(this).$("a div:first").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

$("#menu > div").mouseout(function(){
$(this).$("a div:first").stop().animate({height:'0px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
--------------------------------------------------------------------
I will be glad for every help, I am realy stucked ...thank you.
Regards, GRoNGoR

btw, sorry my english...

• Topic Participants

• grongorcz