css rollover links

i would like to create a rollover for links such that the background and border of the cells in which they are change, when "hovered over". the css i used is;

#rightNav a:link, #rightNav a:visited
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000066;
text-decoration: none;
height: 20px;
width: 200px;
top: 200px;
margin: 0px;
padding: 0px;
}
#rightNav a:hover
{
text-decoration: none;
width: 200px;
background-color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
}

how do i get the effect to work for the whole cell, not just the link text?

 

Hi,

Give them all a fixed with and height (you haven't do that in the hover) and add a display:block to all of them. This should work, I think, but please post if not. Thsi is a really quick reply.

 

tresman sugested right direction, here is working example of class wich you should include in a table tag:
table.menu a {
width:110px;
height: 15px;
border:1px solid #6699cc;
background: transparent;
display: block;
padding: 2px;
text-decoration:none;
font-size:11px;
line-height:12px;
font-family: Ariel, verdana, sans-serif;
}
table.menu a:link {
background: transparent;
border:1px solid ##6699cc;
}

table.menu a:active {
background: transparent;
border:1px solid #6699cc;
}

table.menu a:visited {
background: transparent;
border:1px solid #6699cc;
}

table.menu a:hover {
background: #CED3D6;
border:1px dashed ##6699cc;
}

fell free to experiment and play with a code