Sliding "pull-down" navigation - what do I use? How do I implement? jQuery?

I'm new to Javascript and jQuery, but I'm learning. Here is what I'd like to accomplish:

I have a row of navigation "pull-down" tabs that I'd like to animate. Some sliders will have text links to sub-pages and some will not. The bottom portion of the tab should be clickable to go to the main page. Then the sub-page, text links should also be clickable.

Here is a graphic example that should make sense of what I'd like to do: http://lionheart.net/downloads/nav-example.png

Mouse over, would slide it down. Mouse 开发者_运维百科out, after a second, should auto-slide up.

I would prefer to have it be a div sliding up and down.

Is this possible with jQuery or something else? Thanks so much for any help you can give me!

It is working fine on jquery itself. If you are using jquery i think you may have problem of assigning jquery with id. If you are using id, it worked only one page.

Please use the class in jquery for using all pages. Instead of # using in ID, use . in class.

Since you have no jQuery or JS experience, I would suggest starting from Google (for example with this query). You will find lots of hits (try the first one) which present lots of dynamic menus and include both live demos and tutorials.

Select one that looks about right visually and feature-wise, then follow the corresponding tute. If you have problems, come back to SO with more specific questions.

If you didn't need the animation, you can do pull-down menus with CSS only, and they'll even degrade to simple nested lists if the browser doesn't support it. One example is at http://www.designmeme.com/tutorials/csspulldownmenus/. I can post the CSS and HTML I use if you're interested; just comment below.