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