а что не работает то ?
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('ul.menu li').hover(function() {
$('ul', this).slideDown(500);
}, function() {
$('ul', this).slideUp(500);
});
});
</script>
<style>
.submenu {
display: none;
}
</style>
</head>
<body>
<ul class="menu">
<li>1 Menu
<ul class="submenu">
<li>1 Submenu</li>
<li>2 Submenu</li>
<li>3 Submenu</li>
</ul>
</li>
<li>2 Menu
<ul class="submenu">
<li>1 Submenu</li>
<li>2 Submenu</li>
<li>3 Submenu</li>
</ul>
</li>
<li>3 Menu
<ul class="submenu">
<li>1 Submenu</li>
<li>2 Submenu</li>
<li>3 Submenu</li>
</ul>
</li>
</ul>
</body>
</html>