2

Valid cross browser CSS drop-down menu


By: Marijn Rongen
December 4th, 2009

For this blog (a previous, self-programmed version) I created a menu with drop-down menus. I’m not ashamed to admit the main inspiration for the menu was DannyChoo.com.
I did however set out to build this menu by my own design, without the aid of JavaScript, it should be (X)HTML & CSS valid and be as compact as possible.

What I came up with is tested and proven to work on Safari 4, Firefox 3.5, Opera 10, Google Chrome and Internet Explorers 7 & 8. It has been proven not to work on Internet Explorer 6, and I really can’t be bothered to fix that as people should not be using that browser anymore.

Dropdown menu

The menu gets created by PHP depending on the active content within the site, while writing this article the (X)HTML code created looks like:

<div id="menu_bar">
	<div>
		<a href="http://www.marijnrongen.com">Home</a>
	</div>
	<div>
		<a href="/category">Categories</a>
		<div>
			<a href="/category/about">About</a>
			<a href="/category/Active-Bits">Active-Bits</a>
			<a href="/category/celica">Celica</a>
			<a href="/category/random stuff">Random stuff</a>
			<a href="/category/Tips">Tips</a>
		</div>
	</div>
	<div>
		<a href="/month">Archive</a>
		<div>
			<a href="/month/09_12">December 2009</a>
			<a href="/month/09_11">November 2009</a>
			<a href="/month/09_09">September 2009</a>
			<a href="/month/09_01">January 2009</a>
			<a href="/month/07_08">August 2007</a>
		</div>
	</div>		
</div>

I put this piece of code after the content in the page so a submenu will cover the content once opened.
It is a simple structure, a positioned div element (div#menu_bar), this controls the position of the entire menu. That element can contain several div elements (div.menu) with each one link and an optional div element (div.submenu). This optional div element may contain multiple links.

The CSS is kept as compact as possible, I have omitted the color, background and text formatting declarations for clarity.

#menu_bar
{
	float:left;
	position:absolute;
	top:30px;
	left:50%;
	width:960px;
	margin:0 0 0 -480px;
}

This simply sets the position of the div containing the menu to be 30 pixels from the top and 480 pixels to the left of the center. Exactly where I need it.

div.menu
{
	float: left;
	width: auto;
	height: 20px;
	margin: 0;
	overflow: hidden;
}

div.menu:HOVER
{
	height:auto;
}

Here is where the opening and closing happens. The height is set at a fixed 20 pixels and overflow is set on hidden. This way only the first link element will be visible.
The height is set at auto in the HOVER state, which will overide the fixed 20 pixels height and shows all the content within the element when the mouse moves over it.

.submenu
{
	float: left;
	width: auto;
	padding: 5px 0 5px 0;
}

The sole purpose of this bit is to be able to give the submenu a seperate style. In my case a bit of top and bottom padding.

.menu a,.submenu a
{
	display:block;
	height:18px;
	padding:2px 5px 0 5px;
	margin:0 5px 0 5px;
}

The last bit is to neatly position the links with some paddings and margins.

Thats it!

If you have learned something from this post, or have applied this concept, I would love to hear from you.
Of course, any comment or improvement is most welcome.