jQuery Suckerfish Menu Replacement

Back in the day, Suckerfish was the go-to CSS solution for drop-down navigation menus.  I'm thrilled that nowadays, we can accomplish basically the same thing with a dash of jQuery and far less code.  I recently whipped up one for a mockup.  Here's the HTML/Javascript I used:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// topnav hover - show sub-menus
	$('#topnav li').hover(
		function(){ $(this).children('ul').slideDown('fast'); }, 
		function(){ $(this).children('ul').slideUp('fast');	}
	);
});
</script>

<div id="nav">
	<ul id="topnav">
		<li>Categories
			<ul>
				<li><a href="#kittens">Kittens</a></li>
				<li><a href="#ducks">Ducks</a></li>
				<li><a href="#llamas">Llamas</a></li>
				<li><a href="#llamas">Daleks</a></li>
			</ul>
		</li>
		<li>Hot Topics
			<ul>
				<li><a href="#stem">STEM</a></li>
				<li><a href="#edsummit">Education Summit</a></li>
				<li><a href="#adultliteracy">adult literacy</a></li>
				<li><a href="#socialmedia">social media</a></li>
			</ul>
		</li>
	</ul>
</div><!-- end #nav -->

Here's the CSS:

/* topnav */
#topnav{
	margin: 0;
	padding: 0 0 0 10px;
	list-style: none;
	float: left;
	color: #fff;	
}
#topnav li{
	position: relative;
	float: left;	
	padding: 5px 10px;
	margin-left: 5px;
	cursor: pointer;
	color: #eee;
}
#topnav li:hover{
	background-color: #222;
	color: #fff;
}
#topnav li li{
	display: block;
	float: none;
	background: transparent;
	font-weight: 600;	
	padding: 0;
	margin: 0;
	border-top: 1px solid #555;
}
#topnav li li:first-child{
	border-top: none;	
}
#topnav li li a{
	display: block;
	padding: 0.5em 1em;
	color: #eee;
	text-decoration: none;	
}
#topnav li li a:hover{
	color: #fff;
	background: #222;
}
#topnav li ul{
	position: absolute;
	left: 0;
	top: 2.125em;
	width: 300px;
	list-style: square;	
	padding: 0.5em;
	margin: 0;
	background: #444;
	display: none;	
}