Colorize and Tweak Horizontal Nav Menus

We are renovating our site and starting from ground zero. While the design team hashes out "categories" for navigation, I'm modeling away. We want to use the two level horizontal navigation design where the second level is visible (no more pull downs). Our current model is National Geographic. Using Andy Budd's fabulous book "CSS Mastery"  I got pretty far along, but could use some help because I feel a case of classitis coming on, which I would have done, but it did not work so I stopped.

see my hack up here:

What I'm missing now:

1) when the user lands on this page, the main-nav "HOME" should be selected by default and it's associated sub-nav menu be visible from the start.

2) while "HOME" will have the default background colors of the whole main-nav div, we would like to be able to change the background colors of the other menu items as you move across and hover, where the background color of the main-nav top <li> item is also use as the background colour for the sub-menu (nested <ul>)


3) I need to tweak the whole div so that it does not change size when you click on an item. I think that may be as simple as setting a vertical height.

OK...  I started in on the colors thing, by setting a unique class for one top item as a test:
and color in the css, but it is not working, why I don't know. Probably the parent color takes precedence.

.nav-books a:hover, .nav-books a:focus {
background-color: #f0be2b;

<li class="nav-books"><a href="/books">BOOKS</a>
      <ul class="nav-books">
      <li><a href="all-books">All Books</a></li>
      <li><a href="children">For Children</a></li>
      <li><a href="languages">In Other Languages</a></li>
      <li><a href="lexicon">Lexicon</a></li>

a) this is not working
b) the markup for the nav is going to end up with a bit "classitis" , though not too serious, and it may be unavoidable

I suspect that a little jQuery would help, and I'm fine with a bit of JS for a solution if that helps.

Of course, the array of topNavItem[*color*] will have to be made explicit somewhere, so whether the color definitions are done in a jQuery params string or in the CSS with associated class names in the mark up, I guess it amounts to pretty much the same thing, even if the latter means adding a class to each top level nav item.

So if you solution is either with jQuery or using pure CSS plus mark up or a combo... I'm good either way.


Who is Participating?
SivakatirswamiConnect With a Mentor Author Commented:
I have since solved this problem, using a class for each of the menu items and it's interior <ul>

So, the query here now has changed: can you provide a better solution? The CSS require 10, three-line entries for each of the ten menus. The "challenge" would be: is there a way to code this that make it even leaner? jQuery would be OK.
Saw your question since yesterday, and started working on it, but haven't found a solution for showing first submenu on start.

I'll upload the html and css that i have been using... you had a few extra opening/closing tags that needed to be removed and I also indented the code.

Hope it helps.

HTML file, need to change directory of css link to fit your needs.

CSS file, wich might be identical in content, but indented.
SivakatirswamiAuthor Commented:
@jmnf: "I like it." (smile) Thanks for jumping in.

I looked at many sites doing this and I finally accepted that it would be an inevitable requirement to add classes to the html itself. And that is how I got my pure css solution. I copied that html to the file you made, and posted it:

and linked to the css you created:

I also copied my solution to getting the first nav item to be sticky from the start, I just used and override, where all UL's are set off screen, the follow up with a specific location for nav1

ul.main-nav li ul

ul.main-nav li.nav1 ul.nav1{

it works.

The only issue now with your code was: the colors were not being rendered.  I copied all the selectors from my css to your css but only the top nav item changes color, the subnav <ul> does not


.main-nav li.nav8 a:hover, .main-nav li.nav8 a:focus, ul.nav8{
background-color: #ddb886;

the "ul.nav8" + color is being rendered here:

but not with your method using the jQuery.

I do like that the jQuery helps clean up the css, but we may be "working to hard" when the css can do it for us...  now if we could strip all those ten rules from the css and set up a simple array in the jQuery
nav1:#64000;nav2:#ccedfo;  etc. that might help. but then if my content-design-presentation layer team wants to tweak the colors (they will for sure) it may be better to keep it all in the CSS.

"choice paralysis!"  Too many ways to do things and not enough experience to settle on best practice.

so, actually I would also be content with a solution that simply advises on the best practice in this case, (and why) since, it appears we can go either way with the code

SivakatirswamiAuthor Commented:
The solutions offered by others were not complete.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.