CODEWITHSUNDEEP
jqueryhtmlcssnav
Liam
Liam

Reputation: 9855

Scrollbar interrupts hover state, CSS

I'm trying to create a mega nav only I have a small bug I can't quite figure out.

My parent category on the left has a number of items and is scrollable, when you hover over 1 item, a subnav appear but as you move your cursor towards it, when the cursor hits the scrollbar the subnav dissapears as the hover state is no long active.

I've made a fiddle to show what I mean and any advice or workarounds would be a great help!

http://jsfiddle.net/j45zx3tr/1/

nav nav .products-nav .mega-nav .parent-cat {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 150px;
}

Upvotes: 0

Views: 314

Answers (4)

Ramtin Gh
Ramtin Gh

Reputation: 1050

Ok, if you want a quick fix, you can add direction:rtl; to your mega-nav ul and the scrollbar will be out of your way!

header #site-nav nav .mega-nav ul {
    background: #e6571d;
    width: 235px;
    float: left;
    border: 0;
    padding: 10px 0;
    direction: rtl;
}

Here is the edited fiddle. If that's not what you want, you should use JS as @Mark said, if you dont want to write the timeout stuff yourself, you could use "hoverIntent" jQuery plugin.

Upvotes: 1

Mark
Mark

Reputation: 579

You'll need JS. It's impossible with pure CSS.

User can scrolling a long time.

You should processing mouseenter and mouseleave for li.

Inside mouseenter - just display:block for sub-nav, but inside mouseleave - starting timer for 500 ms and then display:none for sub-nav.

And processing for parent ul - if timer has not expired - clean it - so window sub-nav will be displayed while scrolling.

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

This is what I did:

$(".parent-cat li").hover(function () { $(this).addClass("active").siblings(".active").removeClass("active").find(".sub-nav").css("display", "none");
    $(".active").find(".sub-nav").css("display", "block");
});

$(".products-nav").hover("", function(){
    $(".active").find(".sub-nav").css("display", "none");
});

Here is your updated JSFiddle

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

please try this one:

just you changed height :210px

nav nav .products-nav .mega-nav .parent-cat {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 210px;
}

DEMO

Upvotes: 0

Related Questions