Pure CSS One-Level Dropdown Menu

Alright, time to try and do my own version of a pure CSS dropdown menu tutorial. Despite the very many tutorials out there, few actually explain the entire code, so why not, I’ll give it a try!

Let’s start by creating a regular html nested unordered list as shown below:

Assuming you already know how to create HTML unordered lists, in the above example, we have a nested unordered list with links, and we’ll use the nested list (the second UL element) as the actual dropdown.

Before we make it drop on mouse hover, let’s give it a basic look & feel:

As shown above, with the help of CSS, we’ve formatted and styled our unordered list along with its links to give us a better feeling on what we’re trying to achieve.
Right now, we have the list dropped down, just like it would look when a user would hover it, all that’s left is to hide the nested list and display it on hover, the CSS magic that is!

What we’ve done here is to select the nested list with CSS using “ul#dropdown li ul” and hide it applying “display: none”, so it wouldn’t show once the page has loaded, we then, applied a :hover event to display it whenever the mouse goes over it. We did that by selecting “ul#dropdown li:hover ul”, which basically means: once the list is hovered, select the ascending ul element and apply my settings, which in our case is: display: block.

Here’s the finished code:

Obviously, the design of this menu is pretty raw, applying design changes from this point on is quite simple. I do hope I’ve been sufficiently explanatory throughout this tutorial.

Things to know:

  • To make this dropdown a multi-level dropdown menu, it requires a few minor changes, if you can’t figure it out, go ahead and post in the comments below about it and I’ll gladly make another tutorial with it;
  • Some older browsers including IE6 do not understand the :hover pseudo-class, and sadly, they will not work. There’s a simple way around this issue using javascript or jQuery.

Enjoy!

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

4 thoughts on “Pure CSS One-Level Dropdown Menu

  1. Nice post.
    Especially the people related to Web development.
    I am desktop application programmer.These things are quite different for me but they are needed.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">