Jquery show hide in list not working fine

[ammar]

here is my Fiddle
Just hover on new jersey stores and than hover new york stores u will see an abnormal behavior like it collapses. i.e. it doesnt show the third list properly and results showing first.
Any way to show all sub items properly when there respective parent is hovered.

[Mottie]

@ammar, you might want to check out hoverIntent

[ammar]

Hey thanks for the solution. but what if i have so many list items? actually this is my header menu
and these all li will come united one main menu item

[ammar]

Thanks for the solution.
But in my case i have to do it with js so cant use this :(

[ammar]

Here is the url of my web.
Website
Just hover on Locations.
You will see my lists and hovering lists u can see list items.
if u hover on florida store and than hover the below li the problem accurs.
So in your solution how will i align them?

[Mottie]

Again, try hoverIntent (demo)

$(".parent.dropdown-submenu.mega-group").hoverIntent(
    function() {
       $(this).children('.dropdown-mega.level2').stop(true, false).show("500");
    },
    function(){
       $(this).children('.dropdown-mega.level2').stop(true, false).hide("500");
    }
);

I also included .stop(true, false) to stop previous animations.

[ammar]

I think u didnt get my problem.
Simple hover on new jersey straight away hover new york stores you will see that it doesnt open “new york stores” because the position of LI is changed as the second menu slides up and the mouse is in wrong position according to it. That is my actual problem.

I have a feeling that changing the position of child list items will fix this

[ammar]

hey i did it like this seems ok to me i just changed the sub list items position to left..

Fiddle

[ammar]

Iam using opencart and adding menu from backend extension. so whenever i insert and item it asks for its url, so if i apply jquery for click it will reload so em stucked. :(

[Author]

Posts