Web Navigation has evolved tremendously over the past few years. Code standards of different sorts have become very refined whether we talk CSS (Cascading Stylesheets) or other. Most Content Management solutions also allow you to extend navigation in different directions, either by core functionality or by installing additional modules or plugins. Of these there are plenty but it's not always needed.

To create a good, easy to use navigation system sometimes does not require much, a little bit of planning does the trick. "Keep it simple" as always should be the shining star to follow but simplicity isn't always so easy to achieve, especially not on large sites with 100ths of pages.

Or put in another way, technically complex approaches might be the solution to maintain surface simplicity. That is where additional functions, mobules or plugins comes in. Those are however not the topic here.

Active trail - how to add it

One thing I particularly like and find useful is Active Trail in menus. Which means that If you select a menu item (top level) then a page on level 2 for instance, the main menu item under which pages or links are placed also changes color. Either by the title or the background, or both. See illustration to the right.

Many free themes or templates, even many licensed ones whether for Wordpress or Drupal, don't have this as a standard. But it is reasonably easy to add to your stylesheet.

Drupal CSS - background color as active trail:

#main-menu li.active-trail { 
background: #000000;
} 

Wordpress CSS - background color as active trail:

.navigation-name .current-menu-parent > a {
  background-color: #color;
}

#main-menu (Drupal) or navigation-name (Wordpress) will have to be replaced with the name for the main menu in your CSS. Likewise you swap out the #000000 colors with whatever you use as active background color standard in your stylesheet.

There might be other ways to do it but the above should work in most cases.