Dynamic Drive CSS Library- Inverted Shift Down Menu

CSS Library: Horizontal CSS Menus: Here

Inverted Shift Down Menu

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:

<style type="text/css">

.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.invertedshiftdown ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/

/*BELOW 4 LINES add rounded bottom corners to each menu item.
  ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
  REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}

.invertedshiftdown a:hover{
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}

.invertedshiftdown .current a{ /** currently selected menu item **/
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}

#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}

#myform .textinput{
width: 190px;
border: 1px solid gray;
}

#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}

</style>

The HTML:

<div class="invertedshiftdown">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
<li class="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>
</ul>

<form id="myform">
<input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" />
</form>
</div>

<br style="clear: both;" />

Code Info

Rate this code:

Date Posted: 08/10/2007

Revision History: None

Usage Terms: Click here

Your Comments (26)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 3 pages < 1 2 3 >

Awsome! Works perfectly with my project.

Posted by Jacob on 01/09, 04:40 PM

Great work, this is going on our garage doors website in the next few days ;)

Posted by Garage Doors Bedford on 02/14, 12:42 PM

thanks to help and information about css menu and i hope not problem if menu my blog relation with u site

Posted by Arif on 03/10, 04:49 AM

The red color scheme is located in paragraph 8. change #d10000 to what ever color you want

Posted by some dude on 03/12, 05:07 AM

OOps!!!! there are actually a few spots that need to be changed to change the color scheme. change #d10000 in ALL spots to what ever colors you want. Experiment until you find the colors you want to use.

Posted by some dude on 03/12, 05:14 AM

hello
i tried it and works very well
can u tell me how to make the menu aligned to center instead of left

Posted by asma on 03/16, 04:56 PM

Its working good for me... Thanks for sharing the code... nice one..

Posted by Rohit Khariwal on 03/18, 03:57 AM

i want the code for this javascript program

Posted by Pham Quang Canh on 04/21, 08:37 PM

NICE WORK,THANK FOR YOU!

Posted by Shop design on 04/22, 12:17 AM

The red color scheme is located in paragraph 8. change #d10000 to what ever color you want!!!hah

Posted by DecoratiVe Works on 04/22, 12:18 AM

Comment Pages 2 of 3 pages < 1 2 3 >