I'm trying to make my pop out menu appear when I hover over my 'The Work' link. I've made the popout work just fine. However, the only way I can make the fadein/fadeout work is if I target the #nav div with my .hover variable (this makes the fadein and fadeout work, but makes it work wherever I hover within the #nav div). If I specifically target the 'The Work' <a> tag, the hover doesn't work at all. Any suggestions? I'm guessing that I'm simply not targeting the right location in the .hover variable of my jQuery code.

My code is as follows,

jQuery:

$(document).ready(function () {
$('#nav').hover(
function () {
$('ul li ul', this).fadeIn('slow');

},
function () {
$('ul li ul', this).fadeOut('slow');
}
);

});


HTML:


<div id="menu">
<div id="nav">
<ul>
<ul>
<li class="aligncenter"><a href="" title="">THE WORK</a>
<ul>
<div class="arrow-left"></div>
<li><a class="lipaddingtop" href="" title="">Logo Design</a></li>
<li><a href="" title="">Packaging</a></li>
<li><a class="lipaddingbottom" href="" title="">Print Media</a></li>
</ul>
</li>
</ul>
<ul>
<li class="aligncenter"><a href="" title="">SOLUTIONS</a>
</li>
</ul>
<ul>
<li class="aligncenter"><a href="" title="">ABOUT</a>
</li>
</ul>
<ul>
<li class="aligncenter"><a href="" title="">CONTACT</a>
</li>
</ul>
</ul>
</div>
</div>



Thanks a lot to all who comment!

A coding noob,

- Flying Squash