CSS3-only horizontal drop line tab menu

February 28, 2010
CSS
Design
Tutorials

Recently, Web Designer Wall posted this really cool tutorial on creating a dropdown menu using only CSS3 (no javascript). Not being one to just sit back and let things sit as is, the approach inspired me make a variation. The result, however directly derivitive, is this horizonatal drop line menu based on a variation of WDW's tut.

Note: I haven't tested this in IE6 and don't much care to but it works fine in IE8 with the obvious exception that the CSS3 styles are ignored.

Thanks to Web Designer Wall for the inspiration!

The XHTML markup:

<div id="menu">

<ul id="nav">
<li><a href="#">Menu 1</a>
	<ul>
	<li><a href="#">Menu 1 Submenu item 1</a></li>
	<li><a href="#">Menu 1 Submenu item 2</a></li>
	<li><a href="#">Menu 1 Submenu item 3</a></li>
	</ul>
</li>

<li><a href="#">Menu 2</a>
	<ul>
	<li><a href="#">Menu 2 Submenu item 1</a></li>
	<li><a href="#">Menu 2 Submenu item 2</a></li>
	<li><a href="#">Menu 2 Submenu item 3</a></li>
	</ul>
</li>

<li><a href="#">Menu 3</a>
	<ul>
	<li><a href="#">Menu 3 Submenu item 1</a></li>
	<li><a href="#">Menu 3 Submenu item 2</a></li>
	<li><a href="#">Menu 3 Submenu item 3</a></li>
	</ul>
</li>	
</ul>

</div>

The CSS:

#menu {
  width: 960px;
  height: 40px;
  clear: both;
}

ul#nav {
  float: left;
  width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;  
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 30px;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;     
}

/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #bb0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; 
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x;  
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px; 
}

ul#nav li:hover > ul li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  padding: 0 30px 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x; 
}

ul#nav li:hover > ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
}

Stay well.

Post a comment

Fernando
This is great!
thanks!!!
Posted: February 28, 2010
Skyrocket Labs
Thanks, Fernando ;)
Posted: February 28, 2010
isaias
Fantastic! :)
Posted: February 28, 2010
Kulin
Thank's for sharing but in IE 7 it don't works so well
Posted: March 4, 2010
Skyrocket Labs
@Kulin: Do you have a link you can share?
Posted: March 4, 2010
FW Design
I really like this nav system, its neat and easy to use, Thanks
Posted: March 16, 2010
Ryan
Thank you, it's cool. I plan to use it on my next template.
Posted: March 16, 2010
alevill
Thank you so much for this code. It works flawlessly in every browser, but IE 7 as Kulin mentioned. The submenu hover too far to the right, lining up to the right of the last menu item on the main menu. Is there a fix or a hack so we can get it to behave properly on IE 7? Any help is greatly appreciated
Posted: March 16, 2010
Crumbs
This is a very good menu. However, I'd like to permanently display the sub-menu. I'm having trouble implementing this - any suggestions?
Thanks
Posted: March 24, 2010
Skyrocket Labs
@Crumbs: Try removing 'display:none' from ul#nav ul in the CSS.
Posted: March 25, 2010
Skyrocket Labs
@alevill: Have you tried adding a float property?
Posted: March 27, 2010
Naresh Rokkam
Thanks, Fernando. Its good. But this is not working in IE7
Posted: April 12, 2010
Skyrocket Labs
Naresh, can you send me a screenshot?
Posted: April 12, 2010
dhamasito
Gracias, thanks, nice nice nice see your later!!!!
voy a comer jiji ahy te ves.
Posted: April 12, 2010
alevill
Thank you so much for this code. It works flawlessly in every browser, but IE 7 as Kulin mentioned. The submenu hover too far to the right, lining up to the right of the last menu item on the main menu. Is there a fix or a hack so we can get it to behave properly on IE 7? Any help is greatly appreciated
Posted: March 16, 2010
Rafles
good menu and creative, thanks for sharing.This is jQuery rounded, don't works in IE
Posted: June 2, 2010
Mike
Thanks for this! You can never have too many good nav tutorials!
Posted: June 11, 2010
Benners
hi, I got this working without too much hassle, thank you! how can it be edited so that the child menu is always visible? so whichever 'parent section' you're in, the child menu is always on view?
Posted: August 10, 2010
Alexander
Fantastic code. It helped me a lot while I was making my own menu. Thanks very much.
Posted: August 23, 2010