New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr7+

CSS Menu highlight

 Author: Marc Boussard | Modified by Dynamic Drive

Description: "Highlight" your menu links as the mouse moves over them using this CSS powered script! Thanks to CSS, the effect is very customizable, efficient, does not rely on script, and finally, very small in file size. Visible in IE4+, NS6+, Opera 6/Mozilla, and degrades well with the rest. A good illustration of what CSS alone can accomplish.

Demo:

Main Menu (CSS)
JavaScript Kit
Freewarejava.com
CodingForums.com
BBC News

Directions Developer's View

Step 1: Insert the following code into the <head> section of your page:

Select All

Step 2: Add the below to the <body> of your page. It contains the HTML codes for the menu:

Select All

Configuring the menu

The majority of cosmetic changes to the menu (ie: highlight color, font size etc) can be done simply by changing the attribute values listed in the style sheet of step 1.