I have a vertical menu on my website, made in HTML and javascript. Here under I show you the whole table. How can I change (and shorten!!!) this script in CSS? I'm a beginner with CSS... Thanks for any help.
In the head I have already:
.menu-on { color: #ffffff; background-color: #662402; border-bottom:1px solid #ffffff;padding-left:10px }
.menu-off { color: #ffffff; background-color: #D55F21; border-bottom:1px solid #ffffff;padding-left:10px }
.menu-item:link { font-weight: bold; font-family: "Arial, Verdana, Helvetica, sans-serif"; font-size: 75%; color: #ffffff; text-decoration: none }
.menu-item:visited { font-weight: bold; font-family: "Arial, Verdana, Helvetica, sans-serif"; font-size: 75%; color: #ffffff; text-decoration: none }
.menu-item:hover { font-weight: bold; font-family: "Arial, Verdana, Helvetica, sans-serif"; font-size: 75%; color: #ffffff; text-decoration: none }
in the body
For the mouse-over of the items I still use javascript, as you can see. How can I make it all in CSS?
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="20" width="100%" bgcolor="#919888" class="menu-off" onMouseOver="javascript:this.className='menu-on';" onMouseOut="javascript:this.className='menu-off';"><a href="index.html" class="menu-item">Startpagina</a></td></tr>
<tr><td height="50" align="left" valign="middle" bgcolor="#919888" style="border-bottom:1px solid #ffffff;"><img src="closeup4.jpg" alt="Moorslede 1269-1578" width="100%" height="50" border="0"></td></tr>
<tr><td height="20" width="100%" bgcolor="#919888" class="menu-off" onMouseOver="javascript:this.className='menu-on';" onMouseOut="javascript:this.className='menu-off';"><a href="situering.html" class="menu-item">Gasthuis - geografische ligging</a></td></tr>
<tr><td height="20" width="100%" bgcolor="#919888" class="menu-off" onMouseOver="javascript:this.className='menu-on';" onMouseOut="javascript:this.className='menu-off';"><a href="oudekaarten.html" class="menu-item">Ten Bunderen op oude kaarten</a></td></tr>
</table>
|