Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: Here

Inverted Shift Down Menu II

Author: Dynamic Drive

This inverted horizontal menu creates tabs where the active tab is both longer and its text offset downwards compared to its less active counterparts. It does this by manipulating the tab's top/bottom padding values plus the color of its bottom border.

Demo:


Alternate, non active hover tabs:


By default moving your mouse over a tab triggers the "active" style on it. If you wish to disable this (as seen in the second example above), replace the rule:

.invertedshiftdown2 a:hover{
"
"
}

inside the CSS code with just:

.invertedshiftdown2 a:hover{
background-color: #D10000; /*Highlight red color theme*/
color: white;
}

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 08/10/2007

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive