HTML CSS Drop Down Menu Made Easy – SuckerFish Enhanced

by Yang Yang on January 19, 2009

There’s a pure css drop down menu named SuckerFish published at ALA. Really straightforwardly clean code and simple drop menu script, however it might be friendlier for developers if it’s combined with the li:hover hack for IE6.

The HTML:
<ul id="nav">
	<li><a href="#">bodycare</a>
		<ul>
			<li><a href="#">lotions</a></li>
			<li><a href="#">creams</a></li>
			<li><a href="#">balms</a></li>
			<li><a href="#">butters</a></li>
		</ul>
	</li>
	<li><a href="#">complexion care</a></li>
	<li><a href="#">therapeutics</a></li>
	<li><a href="#">home essential</a></li>
</ul>
The CSS:
#nav, #nav ul {
	padding:0;
	margin:0;
	list-style:none;
}
#nav a, #nav li, #nav li ul {
	width:200px; /* integrated width for all of them */
}
#nav a {
	display: block;
}
#nav li {
	float: left;
}
#nav li ul {
	position: absolute;
	left: -999em;
}
#nav li:hover ul {
	left: auto;
}

There are essentially 2 changes I have made to the original suckerfish code that made the drop menu script even more valuable.

It’s undoubtedly the simplest pure HTML CSS drop down menu script that works across all major modern browsers – IE6, IE7, FF2, FF3, Opera 9 and Safari. You don’t need to add a single dime of javascript for it.

  1. By the help of li:hover hack for IE6, it doesn’t need the small chunk of javascript now which makes it a really pure css dropdown menu.
  2. By merging the width css property for #nav a, #nav li and #nav li ul, it’s now much easier for further tweak and less-bug-prone. However, if you are going to add paddings to any of them which is quite possibly, remember to modify the width value accordingly – that’s why I have put selector “#nav a, #nav li, #nav li ul” ahead of each one of them, so that you can override the old values more easily.

Need a free drop down menu script? This is by far the best one!

mike August 12, 2010 at 6:18 am

do you have a demo for this effect? Or does it have bugs :p

silviu August 10, 2012 at 11:56 pm

this was sooo much help, thanks dude!

Comments on this entry are closed.

Previous post:

Next post: