Dropdown menu's fighting with each other [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for WordPress Development Stack Exchange.

Closed 5 years ago.

Improve this question

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

http://www.glennduxbury-inspections.com/litb/

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.

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.