Simple jQuery hover issue

[chordsoflife]

		$('#future').hide();
		$('#about').hide();
		$('#housing').hide();

		$("#navAbout").hover(function(){
			$("#about").fadeIn(1000);
		})

		$("#navFuture").hover(function(){
			$("#future").fadeIn(1000);
		})

		$("#navHousing").hover(function(){
			$("#housing").fadeIn(1000);
		})

 

Only the first hover in the list will work no matter which I hover over first after a page load. Any idea why?

[haku]

Jquery without the HTML is like a tent with no poles.

[chordsoflife]

Sorry, here it is:

 

	<div id="nav" style="position: relative; z-index: 8;">
		<ul>
			<li><a href="/index.php">Homepage</a></li>
			<li><a href="/housing.php" id="navHousing">Housing</a></li>
			<li><a href="/about.php" id="navAbout">About Us</a></li>
			<li><a href="/future.php" id="navFuture">Future Directions</a></li>
			<li><a href="/contact.php">Contact Us</a></li>
		</ul>
	</div>

	<div class="subNav">
		<ul id="future">
			<li style="padding: 0 26px;"><a href="/future-new_housing.php">New Housing</a></li>
			<li style="padding: 0 26px;"><a href="/future-sash.php" title="Aging Safely at Home">Aging Safely at Home</a></li>
			<li style="padding: 0 26px;"><a href="/future-vac.php" title="Collaborative">Collaborative</a></li>
			<li style="padding: 0 26px;"><a href="/future-blog.php">Our Blog</a></li>
		</ul>
		<ul id="about">
			<li><a href="/about-staff_directory.php">Staff Directory</a></li>
			<li><a href="/about-board_of_directors.php">Board of Directors</a></li>
			<li><a href="/about-opportunities.php">Employment and Volunteer Opportunities</a></li>
			<li><a href="/about-accomplishments.php">Accomplishments</a></li>
			<li><a href="/about-media_relations.php">Media Relations</a></li>
			<li style="width: 20px;"><a href="/about-donate.php">Donate</a></li>
		</ul>
		<ul id="housing">
			<li style="padding: 0 5px;"><a href="/housing-housing_options.php">Housing Options</a></li>
			<li style="padding: 0 5px;"><a href="/housing-upcoming_openings.php">Upcoming Openings</a></li>
			<li style="padding: 0 5px;"><a href="/list_properties.php">Properties by Location</a></li>
			<li style="padding: 0 5px;"><a href="/housing-faq.php">Frequently Asked Questions</a></li>
			<li style="padding: 0 5px;"><a href="/housing-housing_application.php">Housing Application</a></li>
		</ul>
	</div>

[chordsoflife]

Not as simple as I thought I guess. Here's a link to the exact issue I'd like to solve:

 

http://plugins.jquery.com/node/7111

 

There's a solution down at the bottom but I can't wrap my head around it.. still "Learning jQuery" (really, I have the book!). Can anyone dumb that down or tell me if it'll work at least?

[haku]

It looks fine to me. Maybe you need to add semicolons after your statements:

 

 

         $("#navAbout").hover(function(){
            $("#about").fadeIn(1000);
         });

         $("#navFuture").hover(function(){
            $("#future").fadeIn(1000);
         });

         $("#navHousing").hover(function(){
            $("#housing").fadeIn(1000);
         });