here is an example of code if you can’t understand something pls ask me ;) but i think this is very simple for you ;) we you will use just really small javascript and css ;) that’s all :)
what you gonna do :
1 – made html file for example “menu.html”
2 – open file “menu.html”
3 – copy this html code below ;)
4 – paste this code into your “menu.html” file
5 – save “menu.html”
6 – run it in FireFox for example ;)
7 – made a changes in this code if you need it ;)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Menu Demo</title>
<script src=”http://jquery.com/src/jquery.js”></script>
<script>
$(document).ready(function(){
$(“dd:not(:first)”).hide();
$(“dt a”).click(function(){
$(“dd:visible”).slideUp(“slow”);
$(this).parent().next().slideDown(“slow”);
return false;
});
});
</script>
<style>
body { font-family: Arial; font-size: 12px; }
dl { width: 100px; }
dl,dd { margin: 0; }
dt { background: #999; font-size: 14px; padding: 2px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 2px; }
.s { background: #999; font-size: 14px; padding: 2px; margin: 2px; }
.s a { color: #FFF; }

</style>
</head>

<body>
<dl>
<dt><a href=”/”>Menu jQuery</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/12/simple-css-menu/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/12/the-technology-validation-of-the-forms/”>Item 2</a></li>
<li><a href=”http://blog.branding-studio.com/2008/11/ajax-email-validator-ajax-php/”>Item 3</a></li>

</ul>
</dd>
<dt><a href=”/Menu1/”>Menu1</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/11/your-own-scrollbar-color/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/11/css-image-effect-you-can-use-it-in-your-gallery/”>Item 2</a></li>
<li><a href=”http://blog.branding-studio.com/2008/10/some-rules-for-web-designers/”>Item 3</a></li>
</ul>
</dd>
<dt><a href=”/Menu2/”>Menu2</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/10/7-simple-ways-to-get-repeat-websitetraffic/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/10/do-you-want-build-your-website-what-do-i-need-to-do-for-star-my-online-project-first-steps/”>Item 2</a></li>
</ul>
</dd>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/10/how-to-build-a-great-web-site/”>Menu3</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/09/web-design-web-development-seo/”>Menu4</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/10/4-stages-of-web-site-design/”>Menu5</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/category/for-all/”>Menu6</a></div>
<dt><a href=”/Menu7/”>Menu7</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/10/what-is-specification-how-its-look-like/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/09/here-some-sites/”>Item 2</a></li>
</ul>
</dd>
</dl>
</body>
</html>

an example  :)



Menu jQuery
Menu1
Menu2
Menu7


be happy :) !!!