Dropdown CSS menu contracting

Question

I have implemented a dropdown menu into a website, here:

http://www.gardensandhomesdirect.co.uk/

However, The dropdowns themselves seem to contract prematurely. Its sometimes difficult to keep the dropdown open when moving from the initial button onto an option in the dropdown.

Is this a problem with the code or something is affecting it? Is there anything I can do?

Thanks!

Answer 1

Your dropdown divs .dropdown_Xcolumns have a top margin of 4px, When the mouse is on these 4px it's breaking the hover (unless it's done really fast!).. remove the top margin and all should be well.

If you want the effect of a gap between the <li> and the dropdown div - try a top white border on that div

or alternatively, leave the top margin, and add 4px bottom padding to the container <li>s to make them meet up better

Answer 2

try to change for margin: 4px auto; to margin: 2px auto; for .dropdown_buildings in menu.css

Answer 3

You can try to add padding to each li element. It increase the active surface area of the hover area. When the user hover over the top nav and the sub-menu appears, the user can move the mouse downwards, and since he is now still within the padding area the hover is still activated.