Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » css » CSS Rollover Menu

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

Follow Scriptplayground on Twitter (@scriptplay)

Comments: CSS Rollover Menu

 mkeefe  Thu Jun 30, 2005 8:55 pm  
Thank you Jason, for letting me post this very useful article.

-matt
 Chinch  Sat Aug 6, 2005 11:29 am  
Can you show an example..?
 Dan Hughes  Wed Aug 24, 2005 7:07 pm  
hey, love the idea of the possibilities of this, just got into CSS, could you tell me how to stop the text moving when you mouse over? thanks
 mkeefe  Mon Sep 5, 2005 1:34 am  
@Dan Hughes
I have not been able to track down what could do that, but let me get in touch with the author of the article.

@Chinch
Yes, examples are in the works for all articles to give a "result" before you attempt it just in case it isn't what you were looking for.
 spllogics  Thu Nov 17, 2005 9:24 am  
Dan What browser? Have a link to the site?
Make sure you dont have a space between "14" and "px" should be 14px like above. Thats all i can think of that might cause it.
 Pixelcode  Sat Feb 11, 2006 9:10 am  
I think the text is moving because there is no border in the "div.menu a" style only in the hover style and so when the user moves their mouse over the link a border is being created causing the text to move. To fix this have a transparent border in the "div.menu a" style.
 Riny  Tue Jun 13, 2006 5:56 am  
This could better be done with lists..



Tables are not meant for this kind of things :)
s). An tables are fine to use, if you dont like them then dont use them but the work just as well as anything else. :)
 spllogics  Sun Nov 5, 2006 6:08 pm  
Why would you use list when its meant to be a horizontal menu (though you can make it vertical with out the
 Roy  Wed May 21, 2008 4:51 am  
agree much better effects with list
 fenerbahçe  Sun Jun 15, 2008 12:06 pm  
css table properties and examples...
-- http://css-lessons.ucoz.com/table-examples-1.htm -- and -- http://css-lessons.ucoz.com/table-examples-2.htm
 Non Reciprocal  Sat Jun 21, 2008 6:21 am  
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles