CSS 'Only' Drop Down Menus... need one now :)

Looking for the best CSS only drop down to implement on my site… I have been reading reading and reading… need some expert advice.

Thank you!

This should be a good start.

Happy reading! :slight_smile:

Hi sdc. Welcome to SitePoint. :slight_smile:

As FFCus said, there’s a lot available on the web, but here is a link to a very reliable and well-formed example:

Horizontal Drop Down Menus

Just grab the source code and style to suit. There is a tiny bit of JS for the sake of IE6, which can’t handle a pure CSS dropdown.

There’s a technique I’ve been switching over to lately.
Overflow:hidden menu demo

With it’s own scripting instead of relying on a .htc file:
Overflow:hidden menu demo with scripting assist for keyboard

Though I’m also still using the absolute positioning method – my advice is learn as many different techniques as you can, then figure out which is best for you… Just keep in mind the more code it requires the worse a technique it probably is.

I like this one:

stu nicholls dot com | menu - Professional dropdown #2

And this one:

Horizontally Centered Drop-Down Menus with Pure CSS

I also like this Javascript-assisted drop-down menu on Sitepoint:

The Right Way to Make a Dropdown Menu » SitePoint

I do not like the way that javascript was written or how the menu is inoperable without Javascript. I’m in the process of re-doing it to suit my needs. I want it to be a CSS-only menu if Javascript is disabled, but have a Javascript delay and keyboard navigation if enabled.

The only real js free css only dropdown is Timos here. It’s a great example of what can be down with a bit of lateral thinking but you need to understand it fully to customise it as one small mistake can break it.

It’s benefit is that it is automatically keyboard friendly and works in ie6 and under without the need for javascript.

Downside is that it is complicated to understand and really needs fixed heights for the list items.

There is a very slick, simple to use and efficient CSS drop menu here:



That’s the second time you’ve posted that same link in successive posts in old threads and looks like self promotion which is not allowed. I’ll let it stay for now but if I see the same link again in other posts then I will have to assume that all are spam.