Dropdown menu's fighting with each other

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.

Topic theme-twenty-ten css Wordpress

Category Web

1
answered at

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.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.