menu items don't roll over.

I'm using the css menu I found on-line. I changed each color of each button. I can't get the color change on the rollover. I was going to have a different color per rollover but now I' would be satisfied if they all rolled over. Right now the only  thing that rolls over is the home button.
.ubercolortabs{
padding: 0;
width: 825px;
overflow: hidden;
background: transparent;
margin-left: 10px;
}

.ubercolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}


.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}

.ubercolortabs li.home a{
background: #999999 url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.top a{
background: #003399 url(images/roundleft.gif) no-repeat left top;
}

.ubercolortabs li.leg a{
background: #FF0808 url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.bus a{
background: #88d086 url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.health a{
background: #FAC76C url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.lif a{
background: #e6de59 url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.non a{
background: #6B9BDD url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.his a{
background: #B26CCF url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.search a{
background: #666666 url(images/roundleft.gif) no-repeat left top; 
}



.ubercolortabs a{
float: left;
color: white;
background: #777777 url(images/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(images/roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}


.ubercolortabs a span{
float: none;
}

.ubercolortabs a:hover, ubercolortabs a{
background-color: #CC3399; /*background color of tabs onMouseover*/
color: white;
}

.ubercolortabs a:hover , ubercolortabs li a{
background-color: #993366; /*background color of tabs onMouseover*/
color: white;
}


.ubercolortabs a:hover li span{
background-color: transparent;
}

.ubercolordivider{ /*CSS for horizontal line.*/
clear: both;
padding-left: 10px;
width:100%;
background: #804000; /*background color of horizontal line*/
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
background: #003399 url(images/roundleft.gif) no-repeat left top;
}

.ubercolordividerright{ /*CSS for horizontal line.*/
background: #003399 url(images/roundright.gif) no-repeat right top;
}

Open in new window

designaireAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Nenad RajsicCommented:
can you post your HTML code?
designaireAuthor Commented:
Here's total page...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--

a:link {
	color: #FFFFFF;
}
a:visited {
	color: #990000;
}
a:hover {
	color: #CC0000;
}
a:active {
	color: #FF0000;
}

#container
{
width:100%;
padding: 0;
margin: 0;
}

p{
margin: 0;
padding: 5px;
}
#center
{
margin-right:auto;
margin-left: auto;
width: 80%;
}
.ubercolortabs{
padding: 0;
width: 825px;
overflow: hidden;
background: transparent;
margin-left: 10px;
}

.ubercolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}


.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}

.ubercolortabs li.home a{
background: #999999 url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.top a{
background: #003399 url(images/roundleft.gif) no-repeat left top;
}

.ubercolortabs li.leg a{
background: #FF0808 url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.bus a{
background: #88d086 url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.health a{
background: #FAC76C url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.lif a{
background: #e6de59 url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.non a{
background: #6B9BDD url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.his a{
background: #B26CCF url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.search a{
background: #666666 url(images/roundleft.gif) no-repeat left top; 
}



.ubercolortabs a{
float: left;
color: white;
background: #777777 url(images/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(images/roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}


.ubercolortabs a span{
float: none;
}

.ubercolortabs a:hover, ubercolortabs a{
background-color: #CC3399; /*background color of tabs onMouseover*/
color: white;
}

.ubercolortabs a:hover , ubercolortabs li a{
background-color: #993366; /*background color of tabs onMouseover*/
color: white;
}


.ubercolortabs a:hover li span{
background-color: transparent;
}

.ubercolordivider{ /*CSS for horizontal line.*/
clear: both;
padding-left: 10px;
width:100%;
background: #804000; /*background color of horizontal line*/
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
background: #003399 url(images/roundleft.gif) no-repeat left top;
}

.ubercolordividerright{ /*CSS for horizontal line.*/
background: #003399 url(images/roundright.gif) no-repeat right top;
}

.page
{
background: white;
width: 920px;
margin: 5px;
padding: 0px 5px 0px 5px;
font:Arial, Helvetica, sans-serif;
font-size: 12px;
}

.toppage
{
background: #003399;
width: 96%;
margin: 10px;
padding: 10px;
}

.bottom
{
margin-right: auto;
margin-left: auto;
width: 800px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
color: white;
padding: 10px;
}


</style>

<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body><div id="container">
<div id="center">
<p><img src="images/contentdelaware_logo1.gif" alt="logo" width="400" height="61" /></p>
<div class="ubercolortabs">
<ul>
<li class "home"><a href="h"><span>Home</span></a></li>
<li class="top"><a href=""><span>top stories </span></a></li>
<li class="leg"><a href="h"><span>legislator</span></a></li>
<li class="bus"><a href=""><span>business</span></a></li>	
<li class="health"><a href=""><span>health</span></a></li>
<li class="lif"><a href=""><span>lifestyle</span></a></li>
<li class="non"><a href=""><span>non-profit</span></a></li>
<li class="his"><a href=""><span>Hispanic DE</span></a></li>
<li class="search"><a href=""><span>&nbsp;&nbsp;search box&nbsp;&nbsp;</span></a></li>		
</ul>
</div>

<div class="ubercolordivider">
<div class="ubercolordividerright">

  <p><br />
    <img src="images/video.jpg" alt="flasj" width="951" height="390" /></p>
</div>
 
  <div class="page">
    <p>Didn't know if you needed a space for copy </p>
    <p>&nbsp;</p>
  </div><div class="bottom">
    <div>| <a href="http://internetbroadcasting.org/demo1/aboutus.php">About Us</a> | <a href="#">Story Ideas</a> | <a href="#">Advertising Opportunities</a> | <a href="#">Terms of Use</a> | <a href="#">Contact Us</a> | </div>
  </div>
</div>
</div>

</div>
</body>
</html>

Open in new window

Gregory_VCommented:
looks like an ordered list problem.

Take a look here:

http://codex.wordpress.org/Styling_Lists_with_CSS

Perhaps change the code to use <li ID="stuff">

and then reference that in the style sheet

#stuff ul li {}
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

designaireAuthor Commented:
Here's example I'm using. I got the buttons to be diffent colors but can't get them to rollover like example after I changed the buttons...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">


.ubercolortabs{
padding: 0;
width: 100%;
overflow: hidden;
background: transparent;
}

.ubercolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}

.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}


.ubercolortabs a{
float: left;
color: white;
background: #804000 url(images/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(images/roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float: none;
}


.ubercolortabs a:hover, .ubercolortabs li.selected a{
background-color: #CC6633; /*background color of tabs onMouseover*/
color: white;
}

.ubercolortabs a:hover span{
background-color: transparent;
}


.ubercolordivider{ /*CSS for horizontal line.*/
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #804000; /*background color of horizontal line*/
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>


</head>

<body>
<div class="ubercolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com" style="margin-left: 12px"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm"><span>New</span></a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/revised.htm"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com"><span>Tools</span></a></li>	
<li><a href="http://www.dynamicdrive.com/forums/"><span>Forums</span></a></li>	
</ul>
</div>

<div class="ubercolordivider"> </div>

</body>
</html>

Open in new window

Nenad RajsicCommented:
if I understand correctly you want to change your background colour when you hover over a menu item?
if so see test this code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">


.ubercolortabs{
padding: 0;
width: 100%;
overflow: hidden;
background: transparent;
}

.ubercolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}

.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}


.ubercolortabs a{
float: left;
color: white;
background: #804000 url(images/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(images/roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float: none;
}


.ubercolortabs a:hover, .ubercolortabs li.selected a{
background-color: #CC6633; /*background color of tabs onMouseover*/
color: white;
}

.ubercolortabs a:hover span{
	background-color: #0C3;
}


.ubercolordivider{ /*CSS for horizontal line.*/
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #804000; /*background color of horizontal line*/
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>


</head>

<body>
<div class="ubercolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com" style="margin-left: 12px"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm"><span>New</span></a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/revised.htm"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com"><span>Tools</span></a></li>	
<li><a href="http://www.dynamicdrive.com/forums/"><span>Forums</span></a></li>	
</ul>
</div>

<div class="ubercolordivider"> </div>

</body>
</html>

Open in new window

designaireAuthor Commented:
I want each button a different color and each rollover a different color.
HicanCommented:
Hi designaire, I would just use the hover element on the a property, like the code below. This makes your Top Stories button go pink on hover and your Legislator button go Green / Turqoise. Hope this helps :)

.ubercolortabs li.top a{
background: #003399 url(images/roundleft.gif) no-repeat left top;
}
.ubercolortabs li.top a:hover{
background: #f0f url(images/roundleft.gif) no-repeat left top;
}

.ubercolortabs li.leg a{
background: #FF0808 url(images/roundleft.gif) no-repeat left top; 
}

.ubercolortabs li.leg a:hover{
background: #0ff url(images/roundleft.gif) no-repeat left top; 
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
designaireAuthor Commented:
thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.