Styling the Main Navigation Menu

  • Josh


    So I was playing around with the unique ID’s given to each menu item, as well as each sub-menu item… and even each sub-sub-menu item.

    What I came up with was an interesting array of unique colors over each menu item. Moreover, you can set each unique hover color as well.

    Check it out.

    I don’t care much for the current design. But it has given me a LOT of ideas.


    Kenneth John Odle


    I noticed that last night. I think it looks awesome! Especially the matching hover colors.



    Thanks Ken. I’m loving the idea.. I think it just needs some “fine tuning”. I’d like to use gradients, but that’s SOOOO much code for such a simple effect, I’m not sure if it’s going to degrade performance. Each menu item would require it’s own, cross-browser compatible, gradient css.

    Do you think CSS loads faster than an image; in regards to hover effect?


    Kenneth John Odle


    Do you think CSS loads faster than an image; in regards to hover effect?

    Yes, but I’m not entirely sure.

    but that’s SOOOO much code for such a simple effect

    Have you tried any of the online CSS gradient generators?

    This is my favorite:

    But these are also good:

    And of course, this one is very useful, but I haven’t done much with it (yet!):





    Yeah, the colorzilla is my favorite. It’s the one I primarily use. However, the ‘glrzad’ looks very promising, thanks! (It has been bookmarked)

    So, I have 10 menu items, approx. 15 sub-menu items, and maybe 15 sub-sub-menu items. Each item has a unique id; so 40 new css items. Then, each time requires approx. five lines of css styling for cross-browser gradient.

    So, we are at two-hundred lines of css. Then, we have the hover properties, so multiply that by two.

    Soooo, approx. four hundred lines of css to style the menu with gradient.

    Is this like crazy overkill? Or is this normal from a developmental perspective?


    Kenneth John Odle


    Well, using a transparent png could eliminate a lot of that.

    Set the color of each item using regular background:#123456

    Then create two png images, each one pixel wide and however many pixels high your menus are. Create a transparent gradient on each one. The only difference would be that one would be your normal state and the other would be your hover state.

    Then add background: url('path to these images') all at one go all of your menu items. Then you would only need one line to define the gradient for all of your images in the normal state and one line to define the gradient for all of your images in the hover state.

    Of course, this assumes that you want to use the same type of gradient (say transparent to trasparent black, grey, white, or whatever) for all menu items. But even if you didn’t, you could still create two separate gradient images for each color. That would still reduce your css load. And a transparent png image that’s only 1px wide and maybe 20 or 25 pixels high should still come in around 100-150 bytes. If you use caching, that’s not too great a demand on the server, I think.

    I’m not sure if my thinking here makes sense. Basically you are swapping out a fair amount of time in Photoshop for a fair amount of time writing code. Let me know what you think.



    Basically you are swapping out a fair amount of time in Photoshop for a fair amount of time writing code.

    That’s EXACTLY what I was thinking last night while I was experimenting… funny!

    I guess there are two factors I was considering:

    1. Which method loads faster.

    2. Which method is considered more “best practices”.

    I like that the css method automatically adjusts if the width or height of menu items is ever changed in the future. With an image, either the width or the height is going to be fixed.




    I’ve been playing around with it a little more. See what you think…

    I combined the css for the submenus into the parent menu using css selectors. This cut down on a lot of the code. I ended up only having 20 unique css gradient statements; at 8 css lines per id; ends up with 160 lines of css for an interesting gradient menu.

    We shall see where it goes from here 🙂


    Kenneth John Odle


    Wow! I’m suffering from menu envy now. I love the fact that the text also changes color in the hover state. Well done!

    Prasanna SP


    Well done!

    (lemon yellow colour in Services menu and it’s child is making my eye tired..)

    Edit: What I meant was hover colour.



    Nicely done, Josh. I’m a novice at CSS and am having trouble locating which setting(s) color the menu font color. Can you help me please with some guidance? Also, is it located in the style.css or style-light.css? Many thanks!



    Thanks Prasanna. (although I’m not sure what to make of the comment about making your eye tired). Should I change it? Yellow has always been my least favorite color… lol

    Hi Turtle,

    I’m not on my home computer right now. But the first thing I will suggest is for you to install both Mozilla Firefox, and the Firefox addon called Firebug. This addon will give you some powerful tools when it comes to css editing.

    You can view a quick tutorial I put together here, if you’re not already using it 🙂

    I’ll try to give some more specific instructions when I get back home.



    @ Turtle,

    Here is the css which controls the menu font color:

    #header-menu > li > a {
    color: #000000;

    You may change the hex color to whatever you like.

    Here is the code which controls the menu font color during a hover state:

    #header-menu > li:hover > a, #header-menu > li.current-menu-item > a, #header-menu > li.current-menu-ancestor > a {
    color: #FFFFFF;

    Again, change the hex color to whatever you like.



    Many, many thanks Josh for the direction, tips and tutorial!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.