this is the HTML source that you need to take a look at (example on Policies page)
<div class="menu-topnav-container">
<ul id="menu-topnav-1" class="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-3816">About Us
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3614">Why Choose Us?
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-15 current_page_item menu-item-3615">Policies
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3645">Contact Us
The problem is that your CSS code doesn't seem to target any of those classes/IDs, more specifically, the #nav_menu-4 id.
try this :
.menu-topnav-container ul:first-child > li.current_page_item > a{
font-weight: bold;
background: #f0b70c !important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
or
.menu-topnav-container ul.submenu > li.current_page_item > a{
...
}
if it doesn't work , try using only this :
.current_page_item {
font-weight: bold;
background: #f0b70c !important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
hope it helps