Styling css menu with different rollover colors

Is it possible to code a css menu with different rollover colors?
In other words, each menu item would render a different hover color.

Here’s the url: Test site. When you hover now, it’s all the same color for all the items in the horizontal menu.

I would like each to have a unique hover color. I coded the li tags with a unique class. And then wrote a style into the style sheet but nothing happened.

Am I going about this all wrong?

Hi lleighh2,

     Is it possible to code a css menu with different rollover colors?

Yes it is

Am I going about this all wrong?
No, your on the right track. You need to target the separate li classes more specifically in the css. You didn’t even have them in there at all.

Save this as test.html, I have highlighted the new classes in blue.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/css.css" rel="stylesheet" type="text/css" />
<link href="/drop-down-menu.css" rel="stylesheet" type="text/css" />

<title>Services for Students - Forsyth Tech</title>
<style type="text/css">

/************  Top Horizontal Navigation  **************/

#navbg {
/**border-bottom:#808080 solid 5px;**/

margin:0 auto;
font-weight: bold;
color: #EFEFEF;
.suboverlinemenu ul{
padding: 14px 0 2px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: left;
.suboverlinemenu ul li{
display: inline;
.suboverlinemenu ul li a{
color: #EFEFEF;
padding: 6px 2px 4px 2px; /*top padding is 6px, bottom padding is 4px*/
margin:0 6px; /*spacing between each menu link*/
text-decoration: none;
.suboverlinemenu ul li a:hover, .overlinemenu ul li a.selected{
border-top: 8px solid #BD001C;

[COLOR=Blue].suboverlinemenu ul li[B].courseshover [/B]a:hover {
border-top: 8px solid #BD001C;
.suboverlinemenu ul li[B].bizhover[/B] a:hover {
border-top: 8px solid #BD001C;
.suboverlinemenu ul li[B].sshover [/B]a:hover {
border-top: 8px solid #BD001C;
.suboverlinemenu ul li[B].abouthover[/B] a:hover {
border-top: 8px solid #BD001C;
.suboverlinemenu ul li[B].supporthover[/B] a:hover {
border-top: 8px solid #BD001C;

<div id="navbg">
    <div class="suboverlinemenu">
            <li class="homehover"><a href="/home"><img border="0" src=""></a>|</li>
            <li class="courseshover"><a href="/courses">Courses</a>|</li>
            <li class="bizhover"><a href="/business-advancement">Business Advancement</a>|</li>
            <li class="sshover"><a href="/services-for-students">Services for Students</a>|</li>
            <li class="abouthover"><a href="/about">About Forsyth Tech</a>|</li>
            <li class="supporthover"><a href="/support">Support Forsyth Tech</a></li>