Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: Here

Inverted Shift Down Menu

Author: Dynamic Drive

This clean CSS horizontal menu contains tabs with text that shift downwards slightly when the mouse rolls over it. And just for demonstration, it shows how to make the bottom corners of each tab rounded using both CSS3 and Mozilla's proprietary declarations for rounded corners. Note that the rounded corners effect is currently only visible in Firefox (and future CSS3 browsers). The relevant lines within the CSS code are:

-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;

Remove these lines if you're aiming for a consistent look across browsers.

The CSS:


Code Info

Rate this code:

Date Posted: 08/10/2007

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive