Howdy everyone.
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!
<!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>
Thanks mate, that worked! Now to figure out exactly why it worked. 
For anyone who’s interested, here’s the final code before I throw my real links back in:
http://jsbin.com/olala3