Scriptplayground

 Print Page | Close Window

CSS Rollover Menu

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


Find this article at:
http://scriptplayground.com/tutorials/css/CSS-Rollover-Menu/