jQuery - List menu dropdown

JavaScript
1

Howdy everyone. :slight_smile: I’m trying to use jQuery to show a submenu of items when a main item is hovered on. My efforts have come close, but not quite what I want.

http://jsbin.com/iduwi4
The behavior on Link 3 is what I’m wanting, but of course the way the sublinks are embedded you get the behavior you see on the other ones.

http://jsbin.com/eqilo4
I attempted to write it with the links separately, but I’m getting nothing now.

If any of you jQuery ninjas could take a look and possibly point me in the right direction, I’d appreciate it!

2 


<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<style>
	#topmenu { margin: 0; padding: 0; clear: left;}
	#topmenu li {float: left; margin: 0 10px 0 0; padding: 0 10px 0 0;list-style:none;}
	#topmenu li a {display: block; padding 0; text-decoration: none;}
	ul.tabs {float: left; padding: 5px 0; position: absolute; display:none; width:500px;}
	ul.tabs li {display:inline; margin:0 10px 0 0;}
	ul.tabs li a {font-size: 12px; padding: 0;}	
	</style>
	<script style="text/javascript">
	$(document).ready(function() {
		$('#topmenu li.item').hover(
			function() { 
				$('ul.tabs', this).show(); 
		}, 
			function() { 
				$('ul.tabs', this).hide(); 
			}
		);
	});	
	</script>
</head>
<body>
	<ul id="topmenu">
		<li class="item">
			<a href="##">Item 1</a>
			<ul class="tabs">
				<li><a href="##">SubItem 1.1</a></li>
				<li><a href="##">SubItem 1.2</a></li>
				<li><a href="##">SubItem 1.3</a></li>
			</ul>
		</li>
		<li class="item">
			<a href="##">Item 2</a>
			<ul class="tabs">
				<li><a href="##">SubItem 2.1</a></li>
				<li><a href="##">SubItem 2.2</a></li>
				<li><a href="##">SubItem 2.3</a></li>
			</ul>
		</li>
		<li class="item">
			<a href="##">Item 3</a>
			<ul class="tabs">
				<li><a href="##">SubItem 3.1</a></li>
				<li><a href="##">SubItem 3.2</a></li>
				<li><a href="##">SubItem 3.3</a></li>
			</ul>
		</li>
	</ul>
</body>
</html>
3

Thanks mate, that worked! Now to figure out exactly why it worked. :stuck_out_tongue:

For anyone who’s interested, here’s the final code before I throw my real links back in:
http://jsbin.com/olala3