Script.aculo.us effects library to create sliding drop down

[richardhenry]

Thanks in advance for any replies

I'm currently working on the style and user interface side of http://www.saltinyourpopcorn.co.uk/ .

As you can see, on the left hand side of the website is the menu. There are two (ordered) listed items, labeled '1' and '2', each with their own unordered lists beneath them.

<ol id="nav_2">
	<li><a href="#"><b>&#187;</b>Games</a></li>
		<ul id="nav_sub1">
			<li><a href="#"><b>&#187;</b>Type One</a></li>
			<li><a href="#"><b>&#187;</b>Type Two</a></li>
			<li><a href="#"><b>&#187;</b>Type Three</a></li>
		</ul>
	<li><a href="#"><b>&#187;</b>Flash Videos</a></li>
		<ul id="nav_sub2">
			<li><a href="#"><b>&#187;</b>Type One</a></li>
			<li><a href="#"><b>&#187;</b>Type Two</a></li>
			<li><a href="#"><b>&#187;</b>Type Three</a></li>
		</ul>
</ol>

Basically, I would only like an unordered list to appear when it's ordered list counterpart is moused over. It would use the Effect.SlideDown power of script.aculo.us to do this. Then, when the mouse leaves either the ordered list item or the unordered list, the unordered list would slide upward to hide itself, using the Effect.SlideUp power of script.aculo.us.

The document is already linked to the script.aculo.us library (you can see it in use if you click the add content button at the bottom of the menu).

Thanks again for any help anyone can provide! Please remember that I must keep this website XHTML and CSS standards compliant.

Richard