Creating a pure CSS dropdown menu – Web Performance and Site Speed Consultant

In redeveloping the Venturelab site we became increasingly aware that there was
a lot of content that needed navigating extremely simply and fairly rapidly. We
have so much to say and such a lot of content that the navigation of the site
needed to be even more dynamic and encompassing than normal.

This article has been ported from the now-defunct Venturelab Devblog, where
I had originally authored it.

Need Some Help?

I help companies find and fix site-speed issues. Performance audits, training, consultancy, and more.

Each page features a sub-navigation area, which links to all the other pages
within that section of the website. This is great, and works perfectly, but in
order to get to, say, the FAQs page from the
home page, you’d first have to go to the about
page, then on to the FAQs from there. This is by
no means unacceptable, but we like to go that extra step at Venturelab…

I was looking at the main menu of the site when inspiration struck. Something as
common and simple as a series of dropdown menus under each meta menu item would
improve the navigability and usability of the site massively. Also, they are
incredibly simple to create, and here’s where I teach you how…

The concept

What a dropdown menu provides is a hierarchical overview of the subsections
contained within the menu item that spawned it. Basically, it lists all the
subsections within a section of a site when you hover your mouse cursor over it.

Featured case study: NHS

How I helped the NHS rapidly build a brand new product.

Read case study…

They are extremely useful in showing what a section of a site contains, and
allowing you to access it from anyway else in that site, whether that be the
parent page of that subsection, or a page in a different section altogether.

The markup

A lot of dropdown menus rely on bulky, extraneous markup and Javascript to
work, ours will use only the cleanest HTML and some lean CSS, with some lovely
progressive CSS3 for good measure.

As you can see here the markup is simply a series of nested

s. No verbose

IDs/classes, no

The CSS

This is where the magic happens–we use CSS to transform a series of nested
s into a smooth, easy to use, neat and self-contained dropdown menu.

/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */

/*------------------------------------*\
    NAV
\*------------------------------------*/
.nav {
    list-style: none;
    font-weight: bold;
    margin-bottom: 10px;
    float: left; /* Clear floats */
    width: 100%;
    /* Bring the nav above everything else--uncomment if needed.
    position: relative;
    z-index: 5;
    */
}
.nav li {
    float: left;
    margin-right: 10px;
    position: relative;
}
.nav a {
    display: block;
    padding: 5px;
    color: #fff;
    background-color: #333;
    text-decoration: none;
}
.nav a:hover {
    color: #fff;
    background-color: #6b0c36;
    text-decoration: underline;
}

/*--- DROPDOWN ---*/
.nav ul {
    background-color: #fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style: none;
    position: absolute;
    left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;) */
}
.nav ul li {
    padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float: none;
}
.nav ul a {
    white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
.nav li:hover ul { /* Display the dropdown on hover */
    left: 0; /* Bring back on-screen when needed */
}
.nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background-color: #6b0c36;
    text-decoration: underline;
}
.nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration: none;
}
.nav li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background-color: #333;
}

Just a regular horizontal navigation menu…

Right, let’s now break that down… The first section is fairly self
explanatory–here we are just setting up a regular horizontal navigation menu,
the same as any other. However, notice that selectors such as .nav li and
.nav li a will select all list items and links in the dropdowns too. Here
we’re using the cascade sensibly.

One thing of note however is applying position: relative; to the list items,
this allows us to use position: absolute; on the nested s later on.


The nested lists


.nav ul {
    background-color: #fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style: none;
    position: absolute;
    left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;) */
}



Here we have the CSS that controls the s nested within the top level list

items. Obviously we need to remove bullets with list-style: none;, then

position: absolute; to position the dropdown above the list item that holds

it.

A better, more accessible solution than display: none;…
The next line however is a point of interest. Usually, most people would use

display: none; to hide the dropdown while it’s not being used, but due to

a lot of screenreaders ignoring anything with display: none; applied, this is

very inaccessible. What we do instead is take advantage of the fact the 

is absolutely positioned and just position it -9999px off screen when not in

use.

Next up we declare opacity: 0; for the hidden  and then a Webkit only

declaration which will smoothly fade the  in from fully transparent when

hovered.



.nav ul li {
    padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float: none;
}
.nav ul a {
    white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
.nav li:hover ul { /* Display the dropdown on hover */
    left: 0; /* Bring back on-screen when needed */
}



Here we set up the default list item and link styles. Notice the padding-top:

1px; on the