[jQuery] Trying to create a horizontal menu...
Basically, I got it to where I hide all visible "ul li ul" but I only
want to do that when a user hovers over the root "ul li a",
In other words, I only want it active on the first set of "ul li a",
not the sub menus.
I want "ul li ul li a" to remain visible when I hover over a "ul li ul
li a".
Any ideas how to go about this?
JQUERY
$(document).ready(function(){
$("ul li a").hover(function(){
$("#menu li ul:visible").hide()
});
$("#menu li a").hover(function(){
$(this).next("ul:hidden").fadeIn("fast")
});
$("#content").hover(function(){
$("#menu li ul:visible").hide()
});
});
HTML
<div id="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Item 1</a>
<ul>
<li>
<a href="#">Item 1 A</a>
</li>
<li>
<a href="#">Item 1 B</a>
</li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul>
<li>
<a href="#">Item 2 A</a>
</li>
<li>
<a href="#">Item 2 B</a>
</li>
</ul>
</li>
</ul>
</div>