Jquery Menu Hover Problem

JavaScript
1

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:

[COLOR=“#800000”]$(document).ready(function () {
$(‘#nav’).hover(
function () {
$(‘ul li ul’, this).fadeIn(‘slow’);

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

});[/COLOR]

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
2

Well, I managed to fix it. It might not have been the absolutely best way, but what ever is in code?

I simply put all the other links in my navigation (the links that weren’t ‘The Work’) in a different div and gave it a different name. Just sharing the knowledge if anyone else sees this and has a similar problem. :slight_smile: