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

This entry was posted on Friday, July 3rd, 2009 at 5:50 am and is filed under CSS, Web Design . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

«
»

2 Responses to “CSS Menu – How to Create a Multi-color Navigation Menu”

  1. Cathy Says:
    February 14th, 2011 at 11:17 am

    I know this is a really old post, but it’s just been really useful to me and I wanted to say thanks, so thanks!

  2. Herman Says:
    February 14th, 2011 at 11:23 am

    You’re welcome Kathy..the info helped me too after I researched it. I wrote the post to help others who experienced the same problem as I.

Leave a Reply