I'm sure there's a simple CSS answer to this that I'm not seeing :(


On my navigation menu if you hover over a sub menu item, and then slowly move your mouse to the right, it will switch to the next items sub menu. I don't want this to happen especially for the "services" dropdown, because it has a 3rd tier menu I can't even hover over.

I've tried throwing z-index's on the sub menu, and all the items under the sub menu. Nothing I do seems to work, I'm stumped at this point.

1 Answer 1


The problem is that though your sub menu is set to opacity: 0, its still displaying, just transparent. So when you hover any area where a submenu is present, you're triggering #access ul li:hover which sets the opacity of the submenu with #access ul li:hover > ul. Try setting adding visibility: hidden to #access ul ul. Then add visibility: visible to #access ul li:hover > ul. This will allow you to keep the opacity transition.

  • Can I still have the effect where the menu fades in if I'm not using opacity? That was the only reason I was using opacity and not just display.
    – KVDD
    Sep 24, 2015 at 18:58
  • Good point. I'll update my answer. Sep 24, 2015 at 19:08
  • Thanks Mike! I think it is visibility:hidden, but adding that totally worked and preserved the hover effect with opacity. I will remember to use visibility instead of display from now on :)
    – KVDD
    Sep 24, 2015 at 19:27
  • You're right. I updated. Sep 24, 2015 at 19:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.