JQuery hidden adjacent div issue

[dfowler]

Hey guys, I am just starting to get into jQuery and I have run into a problem that is annoying the hell out of me.  I have a menu with all the main options for the site.  However, this site is part of a large network; so I need to include an option for the global nav for the network.  The current menu for the site is so:

<div id="navbar">
<ul id="nav">
	<a href="/" class="first">Home</a></li>
	<a href="/about">About</a></li>
	<a href="/archive">Archives</a></li>
	<a href="/contact">Contact</a></li>

	<a href="/feed/" class="rss">Subscribe to RSS</a>
</ul>
</div>

I didn't write this page, just going in to add the global nav.  Anyway, I modified the menu as such and added the following under it:

<div id="navbar">
<ul id="nav">
	<a href="#" class="hiddenNav">+/-</a>
	<a href="/" class="first">Home</a></li>
	<a href="/about">About</a></li>
	<a href="/archive">Archives</a></li>
	<a href="/contact">Contact</a></li>

	<a href="/feed/" class="rss">Subscribe to RSS</a>
</ul>
</div>
<!-- GLOBAL NAV MENU -->
<div class="globalNav" style="display:none;">
	<script type="text/javascript">
		writeTopGlobal_transition();
		writeBotGlobal_transition();
	</script>
</div>
<script type="text/javascript">
	$(function() {
		$('.hiddenNav').hover(function() { 
			$('.globalNav').show(); 
		});
		$('.globalNav').hover(function() {}, function() {
			$('.globalNav').hide()
		});    
	});
</script>

The two functions in hidden div basically do a document.write of the global nav (which is fairly extensive).  Anyway, here is my issue.  As you can probably guess with my code I want the global nav to appear when a user hovers over the "+/-" link in the main menu.  Then I need it to stay active as long as they are over it.  Currently, this works fine.  The global nav goes away when they move their mouse off of it.  However, during testing I noticed my issue.  If you just hover over the "+/-" and never go to the global nav section it stays open.  I need it to act much like a drop down in that if the user hovers over the "+/-" the nav shows up and if they move it goes away....unless they move to the nav where it should stay up until they move off of it.

 

Thanks for any help here!

[dfowler]

I ended up getting this to work, and the solution was fairly simple.

<div id="navbar">
<ul id="nav">
	<a href="#" class="hiddenNav">+/-</a>
	<a href="/" class="first">Home</a></li>
	<a href="/about">About</a></li>
	<a href="/archive">Archives</a></li>
	<a href="/contact">Contact</a></li>

	<a href="/feed/" class="rss">Subscribe to RSS</a>
</ul>
</div>
<!-- GLOBAL NAV MENU -->
<div class="hiddenNav">
	<div class="globalNav" style="display:none;">
		<script type="text/javascript">
		writeTopGlobal_transition();
		writeBotGlobal_transition();
		</script>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		$('.hiddenNav').hover(function() { 
			$('.globalNav').show(); 
		}, function(){
			$('.globalNav').delay(3000).hide();
		});
	});
</script>