Multi Level CSS Menu #2 (customizing the javascript))

[drw158]

Hello, I don't have a lot of experience with javascript, so this may need to be moved to the javascript forum.

I am testing my site locally, but here is my public indexhibit

Basically, I need help applying the 'css menu #2' to my indexhibit site. My indexhibit site uses a horizontal drop down menu, similar to the 'css menu #2'. I'm am not sure where to start. Right now my menu uses this javascript:

$(document).ready(function()
{
// First we hide all exhibitis 
$("#menu ul li.section-title").nextAll().hide();

// then the active exhibit is showed
$("#menu ul").each(function()
{
$(this).find("li.active").prevAll().nextAll();
});

// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").hover(function()
{
$("#menu ul li.section-title").nextAll().hide();
$(this).nextAll().slideToggle("500");
});
    
});

As you can see it calls up specific css selectors in my style.css

And this script in the head:

<script type='text/javascript'>
path = '<%baseurl%>/files/gimgs/';

$(document).ready(function() { 
	setTimeout('move_up()', 1); 
	expandingMenu(0);  
	expandingMenu(1);  
	expandingMenu(2); 
	expandingMenu(3);
	expandingMenu(4);
	expandingMenu(5);
	expandingMenu(6);
	expandingMenu(7);
	expandingMenu(8);
});
</script>

I have gotten the 'css menu #2' to work but now i need help applying it to my indexhibit menu. Indexhibit is CMS and is up-dateable so there are some things that I dont know how to do. Otherwise, if this were a basic HTML page then I could do it.

Thanks for the help in advance!

[drw158]

To put more simply, I need the animation of the menu to be smooth like it is in the 'css menu #2.' Also, when you roll off of the menu items, the sub menu go back to being hidden. My menu does not do this. Here is an example of my menu. As you can see, the animation rollovers are not as smooth and when you roll off, the sub menus stay visible ( i do not want this ).

Thanks