Dropdown menu's fighting with each other [closed]
-
08-12-2020 - |
题
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.
解决方案
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.