Shows a simple CSS-only rollover menu. No javascript required.
Css Code (place in head or on separate css sheet)
table.menu a { ///Sets properties for the menu block
width: 75px; ///width of blocks
border:1px dotted #999999; //// border properties
display: block;
}
div.menu a { ////Properties for the Menu (static)
color: #999999; //// font color
background: #ffffff; //// BG color
text-decoration:none; //// bold, italic, ext.
font-weight:bold; ////none underline overline line-through blink
font-size:14px; ////font size
line-height:16px;
text-align: center;
font-family: arial;
}
div.menu a:link { ////Link Properties (static)
color: #999999;
background: #ffffff; }
div.menu a:active { ///// Active link properties
color: #999999;
background: #ffffff; }
div.menu a:visited {
color: #999999;
background: #ffffff; }
div.menu a:hover { ///// Hover (rollover ) properties
color: #ff9933;
background: #ffffff;
border:1px dotted #ff9933; }
div.menu ( /// Position
position:absolute;
top:0;
left:0;
)
Place this code where you want the menu to be
<div class="menu" align="center">
<table summary="" cellpadding="1" cellspacing="1" class="menu">
<tr>
<td><a href="home.html" onfocus="this.blur()">Home</a></td>
<td><a href="events.html" onfocus="this.blur()">Events</a></td>
<td><a href="forms.html" onfocus="this.blur()">Forms</a></td>
<td><a href="speakers.html" onfocus="this.blur()">Speakers</a></td>
<td><a href="band.html" onfocus="this.blur()">Band</a></td>
<td><a href="location.html" onfocus="this.blur()">Location</a></td>
<td><a href="contact.html" onfocus="this.blur()">Contact</a></td>
</tr>
</table>
</div>
Side note - to make vertical take the </td> out
Article written by Jason 'Spllogics' Poston