CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Brian Schroeter
Brian Schroeter

Reputation: 1633

Secondary menu disappears when hover ends

I'm not sure how I can go about fixing this exactly but I know it's been done before. If you take a look at my development site here, you'll see the issue. When visiting the site, hover over 'Online Store' in the top navigation and it'll show a secondary menu which I'm powering via the code below...

jQuery('#menu-main > nav > ul > li:first-child').hover( function () {
   jQuery('#navigation').show();
}, 
function () {
   jQuery('#navigation').hide();
});

The problem is of course, trying to access the menu underneath doesn't work because it disappears right away (when going to hover into it).

May someone please help me out with this issue?

Upvotes: 0

Views: 60

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try this,

jQuery('#menu-main > nav > ul > li:first-child,#navigation').hover( function () {
   jQuery('#navigation').show();
}, 
function () {
   jQuery('#navigation').hide();
});

Actually the problem is, You have to add the target element(the element to be visible) into the hover event collection to achieve your need.

Upvotes: 2

Related Questions