CSS Rollovers

Hello-
I am building a sub-navigation bar with link rollovers in CSS. The following is what I am trying to accomplish:
- On mouse-over, the link text changes from white into black and bold
- It also gets a background of a different color (#ba8748)
- When a user clicks on the link, that text turns inactive (no link), but keeps its rollover styling (black, bold, and background)

I am able to get the text and background color changes to appear on rollover, but I can't get the background color to fill the entire width of the div (or table) and control its height/placement around the text. I also don't know how to get the inactive text to keep the same styling as it has when it is a roll-over.

Any help would be much appreciated...

Here is the 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=UTF-8" />
<title>SideBar Test</title>
<style type="text/css" media="screen">
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
.SideBar {
background-color: #ba8748;
width: 202px;
}
.SideBar ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-transform: uppercase;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 15px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
font-weight: bold;
}
.SideBar li{
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
line-height: 14px;
}
.SideBar ul ul{
color: #000000;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 20px;
list-style-type: square;
text-transform: none;
margin: 0px;
}
.SideBar li li{
margin: 0px;
padding: 0px;
}
.SideBar a:link{
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
}
.SideBar a:hover{
font-weight: bold;
color: #000000;
}
.SideBar a:visited{
text-decoration: none;
font-weight: normal;
background-image: url(../images/Misc/Misc_RollOver1.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
</style>
</head>
<body>
<div class="SideBar">
 <table width="202" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td>
   <ul>
   <li>Private individuals</li>
   <ul>
    <li><a href="#">Insurance Appraisal</a></li>
    <li><a href="#">Jewelry Replacement &amp; Restoration</a></li>
   </ul>
   </ul>
  <ul>
   <li><a href="#">Insurance professionals</a></li>
   <li><a href="#">CONTACT US</a></li>
  </ul></td>
 </tr>
 </table>
</div>
</body>
</html>

[edited by: SuzyUK at 6:14 am (utc) on July 11, 2008]
[edit reason] links removed per TOS, full code added [/edit]

CSS Rollovers

Getting text links to change color, styling and background

mikemalphurs

Seb7

mikemalphurs

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week