Topic: Can any one fix this for me.
Here in this code i have given few navigationlinks. On mouse over, it should be displayed as in menu "one" but the size should not be as big. The size of the menu should be like "Two".
menu.html
<html>
<head>
<title>Highlight</title>
<Style>
BODY{font-family:Verdana,Arial,Helvetica;}
#side-bar DIV {BORDER-BOTTOM:#999999; 1px solid; MARGIN: 0px 0px 0px 1px;}
#side-bar {CLEAR: left; FLOAT: left; WIDTH: 165px; MARGIN: 0px 0px 0px 1px;}
#side-bar A {BACKGROUND-COLOR: transparent; FONT-WEIGHT: bold; COLOR:#0066CC; DISPLAY: block; MARGIN: 0px 0px 0px 0px; PADDING-BOTTOM: 1px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; PADDING-TOP: 1px; TEXT-DECORATION: none}
#side-bar A:hover {BACKGROUND-COLOR:#6487DC; FONT-WEIGHT: bold; COLOR:#FFFFFF; TEXT-DECORATION: none}
.sideBarText {DISPLAY: block; FONT-WEIGHT: bold; LINE-HEIGHT: 10pt; MARGIN: 0px 0px 0px 1px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
#side-bar .sideBarText A {DISPLAY: inline; FONT-WEIGHT: bold; MARGIN: 0px 0px 0px 1px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; TEXT-DECORATION: underline}
#side-bar .sideBarText A:hover {BACKGROUND-COLOR: transparent; FONT-WEIGHT: bold; COLOR:#0066CC; TEXT-DECORATION: none}
.menu{font-family:sans-serif,Arial;font-size:12px;font-style:normal;line-height:normal;font-weight:normal;color:#0066CC;}
.menu A:link {font-family:sans-serif,Arial,Helvetica;font-size:12px;text-decoration:none;color:#0066CC;}
.menu A:visited{font-family:sans-serif,Arial,Helvetica;font-size:12px;text-decoration:none;color:#0066CC;}
.menu A:active {font-family:sans-serif,Arial,Helvetica;font-size:12px;text-decoration:none;color:#0066CC;}
.menu A:hover {font-family:sans-serif,Arial,Helvetica;font-size:12px;text-decoration:none;color:#ffffff;}
</style>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
One
<DIV id=side-bar>
<table cellspacing="1" cellpadding="0" border="0" width="160">
<tr><td><img src="images/bl.gif" width="1" height="11"></td></tr>
<tr><td bgcolor="#999999"><img src="images/bl.gif" width="1" height="10"></td></tr>
<tr><td bgcolor="#eeeeee" class="menu" width="160"> <b><a href="#">About Us</a></b></td></tr>
<tr><td bgcolor="#eeeeee" class="menu"> <b><a href="services.html">Services</a></b></td></tr>
<tr><td bgcolor="#eeeeee" class="menu"> <b><a href="business.html">Business Model</a></b></td></tr>
<tr><td bgcolor="#eeeeee" class="menu"> <b><a href="clients.html">Clients</a></b></td></tr>
<tr><td bgcolor="#eeeeee" class="menu"> <b><a href="contact.html">Contact Us</a></b></td></tr>
<tr><td bgcolor="#999999"><img src="images/bl.gif" width="1" height="10"></td></tr>
</table>
</DIV>
<br>
Two
<table cellspacing="1" cellpadding="0" border="0" width="160">
<tr><td><img src="images/bl.gif" width="1" height="11"></td></tr>
<tr><td bgcolor="#999999"><img src="images/bl.gif" width="1" height="10"></td></tr>
<tr><td bgcolor="#eeeeee" class="menu" height="20" width="160"> <b><a href="#">About Us</a></b></td></tr>
<tr><td bgcolor="#eeeeee" class="menu" height="20"> <b><a href="services.html">Services</a></b></td></tr>
<tr><td bgcolor="#eeeeee" class="menu" height="20"> <b><a href="business.html">Business Model</a></b></td></tr>
<tr><td bgcolor="#eeeeee" class="menu" height="20"> <b><a href="clients.html">Clients</a></b></td></tr>
<tr><td bgcolor="#eeeeee" class="menu" height="20"> <b><a href="contact.html">Contact Us</a></b></td></tr>
<tr><td bgcolor="#999999"><img src="images/bl.gif" width="1" height="10"></td></tr>
</table>
</body>
</html>In the above style sheet, if i remove the "DISPLAY:Block;" in ".sideBarText", its working but the highlight is only for text, its not highlighting the complete row.
God wisely designed the human body so that we can neither pat our own backs nor kick ourselves too easily