How to add attractive jquery effects to a menu created with Html.MvcSiteMap().Menu()?

Question

I am trying to change the look and feel of the main site navigation menu, so far I have been able to identify the css attributes and change the background images and font styling but I want to make the sub menu either 'slide down' or 'fade-in' on the page.

As far as I can tell* MvcSiteMap is used and the code works by setting the visibility of the submenu to 'none' and then to 'visible' on hover. Does anyone know how to find the jquery/javascript file which controls this behaviour?

I'm appending the css structure of the menu in case it helps:

<nav id="menu">
  <ul class="dropdown">
   <li class>
     <a href ="/About">About</a>
     <ul class="sub_menu" style="visibility:hidden;">
       <li class>
         <a href="/About/Team">Team</a>
       </li>
       <li class>
         <a href="/About/History">Story</a>
       </li>
     </ul>
   </li>
   ..etc...
  </ul>
</nav>

*I wasn't the one who created the site navigation menu, I recently took over a web development project which so far has been poorly documented and no previous team members remain so I cannot ask them and as I'm very new to this I don't know how to find out how this works.

Answer 1

Here is a basic start... so you can complete with css and add a few other animations or behavior

the running version: http://jsfiddle.net/LUVTQ/

html

<nav id="menu">
  <ul class="dropdown">
   <li>
     <a class="main_option" href ="/About">About</a>
     <ul class="sub_menu" style="display:none;">
       <li class>
         <a href="/About/Team">Team</a>
       </li>
       <li class="main_option">
         <a href="/About/History">Story</a>
       </li>
     </ul>
   </li>
   <li>
     <a class="main_option" href ="/About">Etc</a>
     <ul class="sub_menu" style="display:none;">
       <li class>
         <a href="/About/Team">Team</a>
       </li>
       <li class="main_option">
         <a href="/About/History">Story</a>
       </li>
     </ul>
   </li>
   ..etc...
  </ul>
</nav>​

and the script

$(document).ready(function(){
    $('a.main_option').click(toggleMainOption);    
});

function toggleMainOption(){
    $(this).next('.sub_menu').slideToggle('fast');
    return false;
}