title: can't highlight the current menu item/page wordpress
body: <p>I'm trying to edit a menu in wordpress but I can't seem to give the current page menu item the background colour that I want (highlight effect).</p>
  
  <p>When I put in this bit of css... </p>
  
  <pre><code>ul#menu-menu-1.nav.navbar-nav a {
  background-color: #FFFFFF;
  z-index:9999999;
  }
  </code></pre>
  
  <p>...the link background went white (which is what I wanted).  Then I added this:</p>
  
  <pre><code>ul#menu-menu-1.nav.navbar-nav a:hover {
  background-color: #34676b;
  }
  ul#menu-menu-1.nav.navbar-nav a:active {
  background-color: #34676b;
  }
  </code></pre>
  
  <p>The <code>a:hover</code> works, but <code>a:active</code> doesn't.  Next I tried...</p>
  
  <pre><code>.current_page_item and .current_page_item a:active
  </code></pre>
  
  <p>...but nothing works, the code below is what I have now and it doesn't work either.  Any help will be much appreciated, hopefully all css (I don't know php).</p>
  
  <p>Thanks,
  Lisa</p>
  
  <pre><code>ul#menu-menu-1.nav.navbar-nav {
  padding-top:30px;
  }
  ul#menu-menu-1.nav.navbar-nav a {
  background-color: #FFFFFF;
  z-index:9999999;
  }
  ul#menu-menu-1.nav.navbar-nav a:hover {
  background-color: #34676b;
  }
  ul#menu-menu-1.nav.navbar-nav li.current_page_item a:focus {
  background-color: #34676b;
  }
  li#menu-item-14.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-        item.current_page_item.menu-item-home.menu-item-14.active {
  background-color: #34676b;
  }
  </code></pre>