I found a excellent article about creating a drop down menu using jQuery written by Abhishek Bhardwaj. For simplicity, i merge the .js file and the .html into one file.
<!--
Source article: TW TutorialsWalks - Add JQuery Dropdown effects to Sidebar "sub-links"
Source link: http://tutorialswalk.info/development/jquery-dropdown-effects-to-sidebar-sub-links/comment-page-1
-->
<html>
<head>
<title>Adding JQuery dropdown effect to the sidebar sublibnks | TutorialsWalk | PHP Tutorial</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("li.subnav").hide();
$("li.topnav").hover(
function() {$("li.subnav").slideDown();},
function() {$("li.subnav").slideUp();}
);
});
</script>
</head>
<body>
<div id="sidebar">
<div class="inside">
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="topnav"><a href="#">Sub-Links</a>
<ul>
<li class="subnav"><a href="#">Sub-Link 1</a></li>
<li class="subnav"><a href="#">Sub-Link 2</a></li>
<li class="subnav"><a href="#">Sub-Link 3</a></li>
<li class="subnav"><a href="#">Sub-Link 4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</div>
</body>
</html>
Simple and concise. Thanks Abhishek Bhardwaj.
Done =)
Reference: TW TutorialsWalks – Add JQuery Dropdown effects to Sidebar “sub-links”
Eureka! 