Mink Machine

CSS Menu

When I redesigned the Impulse homepage 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.

Here is an example of how such a menu could look like. Hover 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!).

[2003]

Featured stories

The streets of Paris

"One of the advantages of repeated visits to a place is the leisure pace of awe and discovery while drifting slowly down the worn streets of the French capital."

Historic locations in Gothenburg

"Hundreds of houses were quickly build, but unfortunately all of it was burned to the ground in 1611 by Danish forces."

The lakes of Lombardy

"The town of Como, largest settlement around Lake Como, attracts a lot of people with big wallets. But I preferred to take the funicular up the mountain to the Brunate region, where you get a much better view of the lake."

The urban maze of Tangier

"There are exciting things waiting around every corner and my bucket list is long, but the Medina has a mindset of its own regarding time and space."

Eating my way through Basque country

"Not too bad to wash it all down with a local Txakoli, the young white wine typical of the Basque country."

Wazzup in Vaduz

"Vaduz Castle is overlooking the town from a hill, a short walk from the center. It’s really a postcard view with the alps in the background, which I’m sure the prince enjoys as he sips his morning coffee while towering above his loyal subjects."

Instagram