CSS For Menu Highlighting


On the page http://www.policecommunity.co.uk can you take a look at the page. The main menu is black font for the current chosen option and when you hover over other options nothing highlights etc.

I would like to use the three colours of #FFFFFF #000000 and #00376C to create a menu that visually works with appropriate highlights for current live page and again when hovering.

Would you be able to come up with some CSS that can make this work the way I want please?

Support Access Granted



  • Rupok
    • Support Ninja

    Hi Mr. Wayne, hope you had a wonderful day.

    Well, the following custom CSS code will add a line under the active menu item so users can understand on which page they actually are right now. And on mouse-over, there will be white background with blue text. Please check the attached screenshot for reference.

    .main-menu ul li.current-menu-item a, .main-menu ul li.current-menu-ancestor a {
      color: #ffffff;
      border-bottom: 2px solid #ffffff;
    .main-menu ul li a:hover {
      background-color: #ffffff;
      color: #00376c;

    Do you have any suggestion on this? Please let us know. We will be glad to help.

    Have a nice day. Cheers!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.