Simple menu animation

Simple menu animation

I'm attempting to animate a menu that is set up in this structure:

  1. <ul id="nav">
  2. <li id="menu_home"><a href="#">Home</a></li>
  3. <li id="menu_aboutus"><a href="#">About Us</a></li>
  4. <li id="menu_ministries" class="current"><a href="#" id="current">Ministries</a>
  5. <ul>
  6. <li><a href="#">Canberra</a></li>
  7. <li><a href="#">Melbourne</a></li>
  8. <li><a href="#">Sydney</a></li>
  9. <li><a href="#">SE Qld</a></li>
  10. <li><a href="#">Overseas Missions</a></li>
  11. <li><a href="#">Other - Regions</a></li>
  12. </ul>
  13. </li>
  14. <li id="menu_bookshop"><a href="#">Bookshop</a></li>
  15. <li id="menu_resources"><a href="#">Resources</a></li>
  16. <li id="menu_members"><a href="#">Members</a></li>
  17. </ul>
I am wanting mainly to do two thing with it. To have it slide down on hover (for the one's with sub menu's) and to also have it so that the menu doesn't disappear immediately after you mouse off.

I've tried doing it and I know the basic concept behind how to do it but am unsure how you would refer to the id's etc within the jquery code

Thanks if you can be of any help whatsoever