Menu css

And to add to Paula's and Nancy's solutions, here is another to make your head spin.

Markup:

<ul class="nav">   <li class="active"><a href="index.html">Home</a></li>   <li><a href="about.html">About</a></li>   <li><a href="products.html">Products</a></li>   <li><a href="services.html">Services</a></li>   <li><a href=".contact.html">Contact</a></li>   <li><a href="news.html">News</a></li> </ul>

Styling:

nav li.active {   color: red;   text-decoration: underline;   background: yellow; }

jQuery:

<script> jQuery(document).ready(function($){   var url = window.location.href;   $('ul.nav a').map(function() {   $(this).parent().toggleClass('active', this.href == url || this.href == url.split("?")[0].split("#")[0]);   }); }); </script>

Note:

This solution is viable only if you already have jQuery loaded in your page.

How it works:

When the page loads, it highlights the 'Home' menu item. When the page is ready (document ready function), the script looks up the current URL of the document and compares that to the links of the menu items. If it finds a match, it removes the 'active' class from the 'Home' item and adds the 'active' class to the matched item.

This is a great solution when you use server side includes (SSI's) to add the menu items into a document.

Edit:

Also a great solution when using Dreamweaver's Template system (DWT)

O/k modified version with classes included -

html -

<li class="firstcolor1 secondcolor1"><a href="index.php" title="">Home</a></li>

in your css file -

li .firstcolor1 a:hover {

background-color; your-color-selection;

}

Paste this just before the closing </head> on the actual page -

<style>

li .secondcolor1 {

background-color: same-as-you-used-above;

}

</style>

For each menu item, just increment the numbers used in the class.

thank you very mutch