Dynamic Drive CSS Library- Inverted Shift Down Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

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:

<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 (19)

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 1 of 2 pages 1 2 >

How Do you change the Red into another color if desired. For Instance if My link and Vlink were some form of blue, how do I make to the red horizontal line and the down shift color to change.

Posted by Jalil S~ on 08/16, 10:34 AM

is there anyway to achieve rounded corners for IE?

Posted by Ders on 08/20, 06:15 PM

No, this border effect is for Mozilla only.

Posted by Steve on 09/07, 12:12 PM

Putting the red line top, makes this menu more suitable for template header usable. In this way I think horizantal menu will look seperate from header content but slightly putting bottom will look nice.

I love this site, thank you for your effort.

Posted by alper on 10/04, 12:33 AM

Love this menu......but when I look at it in IE7 it is completely gone. Suggestions?

Posted by Julie on 10/13, 08:02 PM

Looks nice including the find button at the end of the menu, give the menu more option and contrast. Thanks for the code, great site.

Posted by Infomarket on 12/02, 01:50 AM

how do i make the color transparent?? I'm using a different code for that but how would I apply it to this??

Posted by lolz on 01/01, 09:48 PM

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

Comment Pages 1 of 2 pages 1 2 >

Commenting is not available in this weblog entry.