Mouse Rollover Effect

I am trying to create a mouse rollover effect (without using images) so that when the user rolls their mouse over any of the navigation menu items, the background changes to a darker green.

At the moment, although it is sort of working, the width of the darker green matches the width of the menu ‘text’ only and I need/want it to match the width of the entire menu item, i.e. between the separators, so it looks like that menu item is being selected.

This is my site

http://nhspropertyservices.co.uk

I am new to WP and CSS, so any help in terms of which parts of the CSS code need to be edited would be greatly appreciated.

Many thanks