Menu styles hover and current

Hi,

I’ve tried to get this how I need, but falling a little short at the moment. I’m not the best at CSS and learning as I go, and appreciate any help here.

What I’d like:

To have the menus on my dev website work like this;
– No borders in the menu except the top and bottom lines
– Standard #666666 font colour when not selected or not hovering
– Only selected menu item with a #0456a3 background and #ffffff font colour
– Hover over menu item and background should become #0456a3 and font colour #ffffff (hover should cover entire block, not just text)
– I’d like to specify the same type of style with the sub menus, but currently there is a white background which seems to take precedent

What I have currently

– All borders
– Standard #666666 font colour when not selected or not hovering
– Only selected menu item with a #0456a3 background but a #666666 font colour
– Hover over menu text and background becomes #0456a3 and font colour #ffffff

So I’ve messed up somewhere, I believe the #666666 primary font colour I have in the header settings are overriding any settings I store in the CSS quick styles.

Heres what I have so have in my quick CSS

/* Main Menu */

.bottom_nav_header.social_header .main_menu ul:first-child>li a {
border: none;
}

Once again, appreciate any assistance with getting me on track, let me know if theres any further supporting info required here…

cheers