Just threw this together. It works. Explanation in the JavaScript comments.
One thing I will say, storing your elements in arrays is handy and can really speed up your scripts. This is because if you repeat a selector - for instance $("ul#nav > li") - jQuery has to decode that and traverse the DOM to find it each time. Also, be as specific as possible for your purposes when building selectors - the more specific your selector, the faster jQuery can traverse the DOM.
After storing the <li>s, you can find any children of a stored element easily by adding that as a context for your DOM search - $("a", navItems) - will find all <a> elements within the context of your stored "navItems" array (which, as you'll recall stores $("ul#nav > li").
So, $("a",navItems) means the same thing as $("ul#nav > li a"), but it's faster because jQuery doesn't have to traverse the entire DOM to find those elements each time.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css">
<style type="text/css">
#nav {
float:left;
width:100%;
}
#nav li {
float:left;
width:150px;
border:1px solid red;
margin-right:5px;
}
#nav li a {
display:block;
padding:5px;
background:#666;
color:#fff;
}
#nav li a:hover, #nav li a:active {
background:red;
}
#nav li div {
padding:5px;
background:#ccc;
color:#666;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Store the nav items in an array to make script
// execution faster/more efficient.
var navItems = $("ul#nav > li");
// Hide the <div> boxes.
$("div",navItems).hide();
$(navItems).hover(
// Onmouseover (on the <li>s), slideDown the associated <div>.
function(){
$(this).children("div").slideDown("fast");
},
// Onmouseout, slideUp the associated <div>. Using the hover
// on the <li> instead of the <a> keeps the <div> visible if
// you mouse off the <a> because the <div> is a child of the
// <li> and therefore the <li> grows to contain the <div>.
function(){
$(this).children("div").slideUp("fast");
}
);
});
</script>
</head>
<body>
<ul id="nav">
<li>
<a href="#">Link 1</a>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</li>
<li>
<a href="#">Link 2</a>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</li>
<li>
<a href="#">Link 3</a>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</li>
<li>
<a href="#">Link 4</a>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</li>
</ul>
</body>
</html>