Mink Machine

CSS Menu

[2003]

When I redesigned the Impulse website in 2003, I was tempted to try a pull-down menu. This is often done with a lot of horrible JavaScript but I wanted to do one using CSS (even though this example features JavaScript to make it work in IE). It is reasonably cross-browser and standards compliant.

Please note that I do not recommend using this kind of menu for public sites, since it is inaccessible for users with CSS turned off and several mobile browsers. Some users also find it difficult to navigate with pull-down menus. If you use this kind of menu on a site, make sure that navigation is possible even without the pull-down.

Having said that, here is an example of how such a menu could look like. Hover the headers below to see it in action.

How is this done? The markup looks like this:

<ul id="mainnav"> <li><a href="#">English</a> <ul> <li><a href="#">William Blake</a></li> <li><a href="#">Emily Bronte</a></li> <li><a href="#">Robert Burns</a></li> <li><a href="#">John Keats</a></li> <li><a href="#">Percy Bysshe Shelley</a></li> </ul> </li> ... </ul>

As you might guess, the technique is basically about nesting UL elements. The first level of list items is the main navigation. The CSS to handle it looks something like this:

ul#mainnav li { display: inline; position: relative; list-style: none; ...

The second level of unordered lists is the actual drop-down. They are initially invisible, done by setting display:none. They are also positioned absolute, like this:

ul#mainnav li ul { position: absolute; top: 15px; left: -40px; display: none; }

Unfortunately, IE has lousy support for the :hover pseudo class. So to make it work properly, we have to use a bit of JavaScript to attach mouse-over events to the list elements (thank you, Patrick Griffiths and Dan Webb). The solution also uses the infamous Holly Hack for another IE patch.

As always, there is plenty of room for improvement and this code should only serve as a humble example (for instance, don't use inline styles and scripts!).

Featured stories

Exploring Chernobyl

Exploring Chernobyl

"The soundtrack of the day was Radioactivity by Kraftwerk, as we rolled into Chernobyl this morning."
Reliving history in Washington D.C.

Reliving history in Washington D.C.

"As I entered the heavily guarded Rotunda in the center, some of the most famous documents in the world laid before me."
New Years Eve in Sydney

New Years Eve in Sydney

"Opera House is seen in front of the massive fireworks in the harbor area, celebrating the 75th anniversary of the Harbour Bridge."
Memories of Skye

Memories of Skye

"The countryside is charming and some places even have coffee."
The dark days of Sarajevo

The dark days of Sarajevo

"The city survived on the edge of annihilation and has started to recover, but the stone walls still seem to cry out in lament of all the horrible things they have seen."
Aliens in Nevada and New Mexico

Aliens in Nevada and New Mexico

"We turned around and went down another dirt road, past countless Joshua trees until our car was covered in dirt and we finally arrived at the Front Gate of Area 51."

Instagram

Seville
Venice
Fever Ray
Rome
Basel
Kuala Lumpur