CSS problems affecting top level menu

Hi

I am trying to edit the style.css file to come up with a red / yellow theme, for my site – https://www.ukmartin.com – and have hit a problem with the top level menu. You can see from it’s behaviour that when the mouse is hovered over the sub menu items in News and Contact Us, the top level menu cells color and background color’s change when they’re not supposed to. A case of seeing for yourself is easier than understanding a description here I thinks.

How can the CSS be changed so that some sense can be made, so that only the “live” menu / sub-menu item has a yellow background with red text, and all others have red backgrounds and yellow text?

ALSO, uniquely to Firefox, the submenu cell sizes are overly “wide”, and the background colours only cover the length of the text within those cells. IE, Chrome, Opera and Safari, all have correctly sized cells. How can Firefox be made to fall in line with how the drop-down menu is supposed to look?

Many thanks in advance for assistance with these matters.

Martin