td/tr hover

[KatherineF]

I have this menu and would like to make hover works for tr also. Could you please help me with this.

<style>

#menuright a:link, #menuright a:visited
{
background: #ccc;
font-size: 10px;
font-family:verdana, palatino, georgia, arial, sans-serif;
line-height: 22px;
font-weight: bold;
padding: 2px 6px 2px 6px;
text-decoration: none;
color: #666;
}
#menuright a:link.active, #menuright a:visited.active
{
background: #fff;
color: #000;
}
#menuright a:hover { background: #fff;}
</style>


<table>
<tr>
<td>
<table cellspacing='0' cellpadding='0'>
<tr>
<td bgcolor='#cccccc'>
<table width='100%' border='0' cellspacing='1' cellpadding='0'>
<tr bgcolor="white" id="menuright">
<td><a href="#">Menu Option 1</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing='0' cellpadding='0' ID="Table2">
<tr>
<td bgcolor='#cccccc'>
<table width='100%' border='0' cellspacing='1' cellpadding='0' ID="Table3">
<tr bgcolor='#ffffff' id="menuright">
<td><a href="#" class="active">Menu Option 2</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

 

[Vragabond]

How about adding display: block; to your <a> style within #menuright? That will extend <a> element accross the whole cell and you will be able to control the background:

#menuright a:link, #menuright a:visited
{
   background: #ccc;
   font-size: 10px;
   font-family: verdana, palatino, georgia, arial, sans-serif;
   line-height: 22px;
   font-weight: bold;
   padding: 2px 6px 2px 6px;
   text-decoration: none;
   color: #666;
   [b]display: block;[/b]
}

#menuright a:link.active, #menuright a:visited.active
{
   background: #fff;
   color: #000;
}
#menuright a:hover { background: #fff;}

 

[cLFlaVA]

[/code]

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]

 

[KatherineF]

thank you! it works!