CSS Menu – How to Create a Multi-color Navigation Menu

What if you want to make one link in a CSS menu a different color from the rest of the links?

Most CSS menus contain one color for the background, another color for the link text and another for the hover effect. My client wanted one of the links to stand out from all the others so visitors’ eyes would get drawn to it and take action.

See the live multi-color navigation menu at: http://www.unitcoins.us

Here’s how the multi-colored menu was created:

1. Here’s the original html for the left menu (“request a quote” link only)

White text on a blue background with a red hover color


<div id="leftnav">
<ul id="navlist">
<li id="active"><a href="http://www.unitcoins.us/" id="current">Home</a></li>
<li><a href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
</ul>
</div>

2. Here’s the original css for the left menu


#leftnav {
width: 170px;
position: relative;
margin-left: 5px;
margin-top: 20px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#leftnav a
{
display: block;
padding: 3px;
width: 160px;
background-color: #5A79A5;
border-bottom: 1px solid #eee;
}

#leftnav a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#leftnav a:hover
{
background-color: #990000;
color: #fff;
}

3. Here’s the html for the multi-colored navigation menu

Blue text on a white background with a red hover color.
A class called “request” was added.


<div id="leftnav">
<ul id="navlist">
<li id="active"><a href="http://www.unitcoins.us/" id="current">Home</a></li>
<li><a class="request" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
</ul>
</div>

4. Here’s the CSS for the multi-colored navigation menu


#leftnav {
width: 200px;
position: relative;
margin-left: 5px;
margin-top: 20px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#leftnav a
{
display: block;
padding: 3px;
width: 160px;
background-color: #12366A;
border-bottom: 1px solid #eee;
}

#leftnav a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#leftnav a:hover, #leftnav a.request:hover
{
background-color: #CC3300;
color: #fff;
}
#leftnav a.request
{
color: #12366A;
background-color: #FFF;
}

Resource
Pacfic Wings Multi color Menu

*********************
Need a Customized Design or Redesign for your Web Site?
Select one of my Web Site Design Packages