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
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!
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.
good tutorial, menu with css like this would certainly be easier and lighter.
My client wants to have a multi-colored background menu, meaning, each page in the navigation menu to have a different background color, so, home page has blue background, about us had green background and so on. Not sure if this can be done with an existing them, but if so, I would gladly pay for the how to.
Thank you.
James…not sure if this answers your question but add something similar to this css code for each page:
body{
background-color:#A0A0A0;
}
Displays a light blue bg
or if you want to use a background image use:
body{
background-image: url(images/bgimage.gif);
}