Change color of nav menu on current page

[yandoo]

Hiya I was wondering how I can edit my nav menu so that nav menu for the current page changes:

 

I just want it so it is the same as when it is hovered over but i just cant seem to work out how to implement it. If I create a new class and assign it to the nav menu manually and I can change the font color but not the background color or border?

 

<li class="selected">My Travels</li>

 

Any ideas?

 

Thank you

#nav, .nav, #nav .nav li { margin:0px; padding:0px; font-family: Arial; font-weight:600;}
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:5px 20px 5px 20px;border-radius:10px; position:relative; 	background: rgba( 0,0,0, 0.7);border:1px solid #FDD017;margin-left:5px;}
#nav li ul.first {left:-1px; top:100%;}

li, li a {color:#FDD017; text-decoration:none; font-size:16px}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid;  
border-left:none; border-right:none; background:#757547;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#000; background:#FDD017; }
li:hover > .nav { display:block; position:absolute; width:250px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; } 
li:hover { position:relative; z-index:2000; } 

Edited April 17, 2014 by yandoo

[cyberRobot]

It sounds like the CSS styles for "selected" weren't taking precedence. How did you add the CSS code? Perhaps the following will help:

http://css-tricks.com/specifics-on-css-specificity/