dropdown menu doesn't stay still after mouse hover

Question

I am using the veggie theme on Wordpress and have added subcategories to the primary menu, which appear as a dropdown list with mouse hover. However, with mouse out the dropdown disappears. Any ideas on how I can fix it?

The website is http://iceyog.gr/ and the menu element is "FROZEN YOGURT"

Thanks!

Answer 1

I think it's because the hover event is set on the a element instead of the li element.

Since the ul child group is in the li element, when you hover the li you can still see the dropdown when you hover it instead of hover the a element which is not hover when you hover the dropdown child menu.

Here's a basic example to explain my thoughts

Answer 2

there is a few px of space above the ul element (dropdown).

In the style.css file on line 2207 there is this code:

.main-navigation ul ul {
background: white;
float: left;
margin-left: -0.875em;
padding: 0 0.875em;
position: absolute;
top: 1.75em; // (Remove this line to fix the issue)
left: -999em;
text-align: left;
width: 180px;
z-index: 99999;
}