Stuff

JS

var nav = '#top-nav';

function rcsMenuAutoAttach() {
  $(nav +' > div.toggles > ul > li a').each(function(i) {
    $(this).click(function(e) {
      if (!$(this.parentNode).is('.children')) {
       return true; 
      }
      
      if (!$(nav +'')[0].opened) {
       $(nav +' > div.menus').slideDown();
       $(nav +'')[0].opened = true;
      }
      
      if ($(nav +'')[0].current_menu != i) {
        $(nav +'')[0].current_menu = i;
      } else {
        $(nav +' > div.menus').slideUp();        
        $(nav +'')[0].current_menu = null;
        $(nav +'')[0].opened = false;
      }
      var id = this.parentNode.id.split('_');
      
      rcsMenuSetActive(id[id.length - 1]);
      
      return false;
    });
  });
  
  //$(nav +' > div.menus').slideUp('fast');
}

function rcsMenuSetActive(index) {
  $(nav +' > div.menus > ul').each(function(i) { $(this).removeClass('active'); });
  $(nav +' > div.toggles > ul > li').each(function(i) { $(this).removeClass('active'); });
  $('#menu_'+ index).addClass('active');
  $('#parent_'+ index).addClass('active');
}

$(document).ready(rcsMenuAutoAttach);



MARKUP

<div id="top-nav">
  <div class="quicklinks">
      <input name="quicksearch" value="true" type="hidden">
       <select name="quickarea" style="width: 140px;">

        <option value="">Quick Links</option>
       </select>
  </div>
  <!-- Primary Nav -->
	<div class="toggles">
<ul class="menu">
  <li id="parent_53" class="leaf"><a href="/" title="Home Page">Home</a></li>
   <li id="parent_44" class="leaf children"><a href="/?q=aboutus" title="About Saint Mary's">About Saint Mary's</a></li>

   <li id="parent_45" class="leaf children"><a href="/?q=admission" title="Admission Information">Admission</a></li>
   <li id="parent_46" class="leaf children active"><a href="/?q=academics" title="Academics at Saint Mary's">Academics</a></li>
   <li id="parent_47" class="leaf children"><a href="/?q=student-life" title="Student life at Saint Mary's">Student Life</a></li>
   <li id="parent_48" class="leaf children"><a href="/?q=athletic" title="Athletics at Saint Mary's">Athletic</a></li>
   <li id="parent_49" class="leaf"><a href="/?q=giving-to-saint-marys" title="Giving to Saint Mary's">Giving to Saint Mary's</a></li>
</ul>
</div>

<div style="overflow: visible; display: none; height: 217px;" class="menus"> 
<ul class="menu" id="menu_44">
  <li id="parent_62" class="leaf"><a href="/?q=%23" title="">Another test link</a></li>
  <li id="parent_61" class="leaf"><a href="/?q=%23" title="">test copy</a></li>
  <li id="parent_67" class="leaf"><a href="/?q=%23" title="">test link</a></li>
</ul>
 
<ul class="menu" id="menu_45">
  <li id="parent_68" class="leaf"><a href="/?q=%23" title="">Test Link</a></li>

  <li id="parent_63" class="leaf"><a href="/?q=%23" title="">Test Link</a></li>
</ul>
 
<ul class="menu active" id="menu_46">
  <li id="parent_50" class="leaf"><a href="/?q=test" title="">test sub menus</a></li>
</ul>
 
<ul class="menu" id="menu_47">
  <li id="parent_64" class="leaf"><a href="/?q=%23" title="">Test Link</a></li>
</ul>
 

<ul class="menu" id="menu_48">
  <li id="parent_65" class="leaf"><a href="/?q=%23" title="">Test Link</a></li>
</ul>
  <br clear="all"></div>
<script type="text/javascript">$(nav +" > div.menus").css({ display: "none" }); </script>

</div>


CSS

#top-nav {
  background: #3f6b94;
}
#top-nav a { color: #fff; }
#top-nav .toggles ul li { 
 display: inline; 
}

#top-nav .menus ul {
  margin: 0; padding: 0;
  display: inline;
  float: left;
  margin: 0 20px;
}