When I mouseover the main menu, something strange happens???

I have been trying to work out why, when I place my mouse over the top menu, a part of the horizontal bar appears underneath the drop down menu. Can someone please have a look at the menu and the css, and please tell me how I can fix it?

The menu - the top menu is what I am wanting to fix, mouseover the Product Range, and you will see what I am talking about.

CSS - #mainMenu is what you should be looking at, starts on line 36.

Thanks in advance.

Try adding a height and overflow: hidden to the CSS for li item. I don’t see anything else that would cause the problem.

I tried all of that, with the overflow: hidden the drop down menu disappeared, and the height made no difference. Do you have any other suggestions?

Your Wayfinder tpl is at fault. If you "view source", you’ll see that both ul tags have an id attribute of mainMenu (<ul id="mainMenu">). This is not only invalid (only one of each type of element can have the same ID) but it’s also causing your problem, as your CSS specifies the background image for ul elements with that ID.