I'm trying to create a menu system with jQuery and i am stuck. any help would be appreciated. I have one main navigation and each item in it has a submenu to be displayed... I'm trying to make it so if you move the mouse over one of the items in the main menu, the sub menu for that item is shown so you can move your mouse over to the submenu and keep the styling "hovered" for the main menu item, allowing you to select a submenu item. If your mouse move off from all menu items, the complete menu is shown as what has a class of "active". I hope that makes sense. LOL
Code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 2</title>
<style type="text/css">
body { margin:0; padding:0; }
#nav-main-wrap { position:relative; height:40px; background:url('images/main-nav-bg.png') repeat-x; }
#nav-submain-wrap { position:relative; height:32px; background:#336699; }
ul.nav { position:absolute; top:0; left:0px; width:100%; list-style: none; list-style-type: none; display: block; margin:0; padding:0; height:inherit; }
ul.nav li { float:left; display:block; height:inherit; }
ul.nav li a { text-decoration:none; color:#fff; display:block; padding:0px 20px 0px 20px; outline:0; }
ul.nav li img { border:0; padding:4px 3px 4px 3px; vertical-align:bottom; }
#nav-submain-wrap ul,#nav-submain-wrap ul.hidden { visibility:hidden; }
#nav-submain-wrap .active,#nav-submain-wrap .hover { visibility:visible; }
ul#nav-main.nav li a.hover { background:url('images/main-nav-hover.png') repeat-x; }
ul#nav-main.nav li a.active { background:url('images/main-nav-active.png') repeat-x; }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#nav-main li a").mouseenter(function(){
var itemid = "#" + $(this).attr("id") + "-group";
//$(itemid).show();
if(!$(this).hasClass('active')) {
$(this).addClass('hover');
}
//$(.active).addClass('hidden');
$(itemid).addClass('hover');
},
function(){
var itemid = "#" + $(this).attr("id") + "-group";
//$(itemid).stop(true,true).hide();
$(itemid).removeClass('hover');
});
$("#nav-main li a").click(function(){
//set as active, get parent id, add "-group" and set that id as active
//then use jquery ajax to grab and display content
});
$("#nav-submain-wrap ul li a").click(function(){
//get grandparent id, set as active, trim "-group" from id and set as active
//then use jquery ajax to grab and display content
});
});
</script>
</head>
<body>
<div id="nav-main-wrap">
<ul id="nav-main" class="nav">
<li><a href="#" title="Main 1" id="nav-main1" class="active"><img alt="" src="images/main1.png">Main 1</a></li>
<li><a href="#" title="Main 2" id="nav-main2"><img alt="" src="images/main2.png">Main 2</a></li>
<li><a href="#" title="Main 3" id="nav-main3"><img alt="" src="images/main3.png">Main 3</a></li>
</ul>
</div>
<div id="nav-submain-wrap">
<ul id="nav-main1-group" class="nav active">
<li><a href="#" title="Sub Main 1-1"><img alt="" src="images/submain11.png">Sub Main 1-1</a></li>
<li><a href="#" title="Sub Main 1-2"><img alt="" src="images/submain12.png">Sub Main 1-2</a></li>
<li><a href="#" title="Sub Main 1-3"><img alt="" src="images/submain13.png">Sub Main 1-3</a></li>
</ul>
<ul id="nav-main2-group" class="nav">
<li><a href="#" title="Sub Main 2-1"><img alt="" src="images/submain21.png">Sub Main 2-1</a></li>
<li><a href="#" title="Sub Main 2-2"><img alt="" src="images/submain22.png">Sub Main 2-2</a></li>
<li><a href="#" title="Sub Main 2-3"><img alt="" src="images/submain23.png">Sub Main 2-3</a></li>
</ul>
<ul id="nav-main3-group" class="nav">
<li><a href="#" title="Sub Main 3-1"><img alt="" src="images/submain31.png">Sub Main 3-1</a></li>
<li><a href="#" title="Sub Main 3-2"><img alt="" src="images/submain32.png">Sub Main 3-2</a></li>
<li><a href="#" title="Sub Main 3-3"><img alt="" src="images/submain33.png">Sub Main 3-3</a></li>
</ul>
</div>
</body>
</html>
Before you post, read our: 
Jquery mouse out still show sub nav if over
