Support » Fixing WordPress » How to use CSS classes in menus to make each item a diff. color

  • Resolved graysonn



    I am absolutely new to CSS and wanted advice on how I could make each item in my menu when hovered on, shows a different color. Kind of like the menu of this website

    I understand that this may be theme specific, and the website link is here (the secondary, more prominent menu not the small one on the top right):

    If you could also be so kind as to explain to me the specific steps/code I need to place in my style sheet and/or the CSS classes in appearance > menu

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Christine Rondeau


    Volunteer Forum Moderator

    If you look at the HTML source code you can see this:

    <ul class="menus menu-secondary">
    	<li class="cat-item cat-item-1"><a href="" title="blender y'all">Blender</a>
    	<li class="cat-item cat-item-5"><a href="" title="View all posts filed under Daily">Daily</a>
    	<li class="cat-item cat-item-4"><a href="" title="View all posts filed under How To">How To</a>
    	<li class="cat-item cat-item-7"><a href="" title="View all posts filed under Humor Therapy">Humor Therapy</a>
    	<li class="cat-item cat-item-6"><a href="" title="View all posts filed under Plan B">Plan B</a>

    So in your css, you could do something like:

    .menu-secondary .cat-item-1 a:hover {background:yellow;}
    .menu-secondary .cat-item-5 a:hover {background:green;}

    Just use the classes generated and pick whatever colour you want.
    Look at your style.css to see how the main one if done and just add these new styles below.

    If you take a look at the css-tricks source you will see that they have a different class on each of the menu items. I’ve never done that, but there is a way to add classes based on the permalink. That site is a WordPress site.

    Do you use a developer tool like FireBug or the Safari WebInspector, if not you should give it a try, they help a lot if you want to figure out how someone did something, or what you did wrong.


    To add a specific class to a menu item, turn on the CSS Classes option in Screen Options on the Appearance/Menus page. It will allow you to specify a particular class for each menu item.


    Thank you Christine and Peter, I was able to change the color using the CSS code you provided. However, the color seems to fill the general space around the button, rather than just the button itself, which makes it look somewhat unprofessional. I have attached a screen shot for you to see the difference between what the button looks like by default (in orange, theme settings) and when I changed the color of the button next to it using the code provided above..
    The orange one seems to neatly fill in the borders where as when I used the code on the “daily” button it seemed to bluntly just fill in the space with the specified color.
    I have saved the website as is if the html need to be checked..

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to use CSS classes in menus to make each item a diff. color’ is closed to new replies.