This is a quick demonstration of how to make a rollover menu. An example is shown here.
Sample Rollover Menu
My goal was to create a rollover menu with included these features:
- Item background changes when the mouse passes over.
- The entire background is clickable, not just the text.
- Small spaces between each menu item.
The menu is contained in a <div> tag with a class of RolloverMenu. The menu items are contained in a simple unordered list. The CSS styling takes only six lines, 7-12 shown below.
- Line 7 - Sets the width of the menu and defines the font size, weight, and color.
- Line 8 - Removes the bullets and indentation from the list.
- Line 9 - Sets the background color, puts a small margin around the menu items and centers the text.
- Line 10 - A little magic happens here. Setting the display type to block is what makes the entire area clickable. Otherwise, only the text is clickable. Since this is a menu, text decoration is turned off for links in the menu. A border is drawn here instead of around the
<li>tag to prevent any sort of outer box from showing when we mouse over. - Line 11 - Swap the background color when the mouse passes over.
- Line 12 - Turn off any text color changes when the mouse passes over.
Here is some sample source code demonstrating the menu on a stand alone page. Click on the pages title link to view the example. Use the view source option of your browser to get the actual source code.
For a book with lots of CSS examples check out: