HTML CSS Drop Down Menu Made Easy – SuckerFish Enhanced

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!

2 thoughts on “HTML CSS Drop Down Menu Made Easy – SuckerFish Enhanced”

Comments are closed.

Scroll to Top