Colorize and Tweak Horizontal Nav Menus

Posted on 2011-02-24
Last Modified: 2012-08-13
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.


Question by:Sivakatirswami
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3

Accepted Solution

Sivakatirswami earned 0 total points
ID: 34981594
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.

Expert Comment

ID: 34982664
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.

Author Comment

ID: 34988274
@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


Author Closing Comment

ID: 38213716
The solutions offered by others were not complete.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question