Articles

Inspiration

Tutorials

About

Archives

Contact

How To Create a Pure CSS Dropdown Menu

Search

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu.

Subscribe for email updates

Don't miss a post! Sign up for monthly digests of the top content from Line25. Every subscriber gets a free handy pack of web shadows.

The menu well be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. Take a look at the CSS dropdown menu demo to see it all in action. Enter your email address

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

View the pure CSS dropdown menu demo

Subscribe and Download

The HTML Structure

<nav> <ul> <li><a <li><a <li><a <li><a </ul> </nav> href="#">Home</a></li> href="#">Tutorials</a></li> href="#">Articles</a></li> href="#">Inspiration</a></li>

First up well need to create the HTML structure for our CSS menu. Well use HTML5 to house the navigation menu in a <nav> element, then add the primary navigation links in a simple unordered list.

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a></li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li>

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

<li><a href="#">Inspiration</a></li> </ul> </nav>

The first sets of sub-menus can then be added under the Tutorials and Articles links, each one being a complete unordered list inserted within the <li> of its parent menu option.

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </nav>

The secondary sub-menu is nested under the Web Design option of the first submenu. These links are placed into another unordered list and inserted into the Web
open in browser PRO version
Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Design <li> .

So far this leaves us with a neat layout of links with the sub-menus having a clear relation to their parents.

The CSS Styling

nav ul ul { display: none; } nav ul li:hover > ul { display: block; }

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Lets begin the CSS by getting the basic dropdown functionality working. With CSS specificity and advanced selectors we can target individual elements buried deep in the HTML structure without the need for extra IDs or classes. First hide the sub menus by targeting any ULs within a UL with the display:none; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.

nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; }

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

We can then start to style up the main navigation menu with the help of CSS3 properties such as gradients, box shadows and border radius. Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden , which would hide the sub menus and prevent them from appearing.

nav ul li { float: left; } nav ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } nav ul li:hover a { color: #fff;

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

} nav ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; }

The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser this will make the link change to a blue gradient background and white text.

nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; border-top: 1px solid #6b727c;

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; color: #fff; } nav ul ul li a:hover { background: #4b545f; }

The main navigation bar is now all styled up, but the sub menus still need some work. They are currently inheriting styles from their parent elements, so a change of background and the removal of the border-radius and padding fixes their appearance. To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom). The LIs of each UL in the sub menu dont need floating side by side, instead theyre listed vertically with thin borders separating each one. A quick hover effect then darkens the background to act as a visual cue.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

nav ul ul ul { position: absolute; left: 100%; top:0; }

The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li> .

The Completed Pure CSS Dropdown Menu

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

View the pure CSS dropdown menu demo

396
Tw eet 595 Like

153

10
Share

9 0

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows. Enter your email address Subscribe

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

More posts like this

How To Create a Trendy Flat Style Nav Menu in CSS How To Create a Cool Animated Menu with jQuery Create a Responsive Web Design with Media Queries How To Code a Blog Theme Concept in HTML & CSS How To Create a Slick Features Table in HTML & CSS Create a Grid Based Web Design in HTML5 & CSS3

35 Comments
Web design Maidenhead
August 13, 2012 at 11:07 am

Useful technique, am thinking about using it on future projects.

AucT
great tutorial!!! will start using dropdown lists from now)
open in browser PRO version

August 13, 2012 at 11:56 am

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

smashinghub
amazing and easy dropdown menu tutorial thanks

August 13, 2012 at 12:22 pm

Andrei
Does it work in IE7, IE8?

August 13, 2012 at 12:23 pm

Jason
another solution for IE.

August 13, 2012 at 1:59 pm

Nope. As is the case with nearly every CSS3 element, you'll need

Fernanda
Where is the downloads of arquives?

August 13, 2012 at 12:52 pm

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Greg Tarnoff

August 13, 2012 at 3:01 pm

This isn't very accessible for keyboard navigation. While the top level is focusable, no flyouts happen or even focus on those elements when hidden. I tried adding a :focus to the hover events and that still doesn't work. 1 in 5 people struggle to use the web. Using a menu like this doesn't help them.

Beata
It's a pity it is not working with IE.

August 13, 2012 at 3:07 pm

Alex
it's a pity that IE sucks.

August 13, 2012 at 9:02 pm

:-)

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Garry Conn

August 13, 2012 at 5:38 pm

You know, drop down menus have always been a challenge for me. For starters, there's so many other sites that provide tutorials on them, but they're really hard to follow or don't provide enough details to get me thru the snags. This has to be probably one of the best drop down menu tutorials I have read. Plus the design craftsmanship behind it is amazing. Thanks for posting this Chris. It will totally be a tutorial I will find myself coming back to often.

Jon Ewing
earlier.

August 13, 2012 at 5:45 pm

Not true, Beata this menu works in IE9+ but not in IE8 and

However, I do think one thing is missing aside from the accessibility (which I agree, Greg, is a real and important consideration) I think it's important to have a graphical element that indicates the difference between a menu item with a dropdown or fly-out and one without. Something like an arrow or triangle to indicate that there is hidden content.

But that's not a criticism of the tutorial. Such niceties are really for the individual designer to add. And this is a very clear and wellopen in browser PRO version
Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

written tutorial.

FvG

August 13, 2012 at 6:36 pm

Can anyone tell me what the > means for css? nav ul li:hover > ul

Idraki
ul after the hovered li.

August 13, 2012 at 7:15 pm

The immediate child element the selector met. In this case, the first

Seham Syed

August 13, 2012 at 7:15 pm

The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.

Envira
Thats cute and awesome.
open in browser PRO version

August 13, 2012 at 8:02 pm

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

I love it,will use in future projects :)

Simon Duck

August 13, 2012 at 8:17 pm

Thanks for the tutorial. I've recently started a new project and making the mock-up and as I didn't want to produce a full blown thing, just HTML and CSS, I really needed a decent article to follow.

Regards, Simon Duck

Carlos Campos
Works in IE :)

August 13, 2012 at 10:02 pm

http://necolas.github.com/normalize.css/

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Brighton Electrician
on my own website.

August 13, 2012 at 10:36 pm

Cracking tutorial! I think I'll have to use some of these techniques

I designed my website using HTML and CSS only so this will work really well I'm sure!

Thanks Chris :)

Steve

August 14, 2012 at 6:29 am

I've seen this technique used in a few WordPress themes; it looks great! The Internet Explorer compatibility issue makes me hesitant to use this sort of thing on my main site, though.

I'm also wondering, does an advanced search engine crawler like Google's consider this masking or something else that could reduce the quality of the site as far as the crawler is concerned?

canciller
open in browser PRO version

August 14, 2012 at 11:58 pm

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

thank you, thank you, thank you

nice tut.

Osho Garg

August 15, 2012 at 5:52 am

Hello Chris Thank You Very Much For Sharing This :) I Am Going To Install This Widget On My Blog. This DropMenu Really Rocks With Javascript :)

itoctopus

August 15, 2012 at 9:20 am

A drop down menu in CSS is much smoother that one written in JavaScript and it won't get affected at all if the person chooses to disable JS on his browser (it'll still work).

Thanks for sharing!

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

fjpoblam

August 15, 2012 at 4:46 pm

In the course of learning responsive design, I was inspired by a new idea. It is, the idea that the entire site need not be linked from each menu (often eliminating the need for a drop-down). Keeping links within context, with a link-back to upper levels makes the site more usable, too.

Thus, in your example, selection of "Tutorials" might lead to a page on which the most important (e.g. "Photoshop") is featured with an across-the-top including "Home", "Illustrator", and "Web Design".

web design springfield mo

August 16, 2012 at 5:42 am

Pretty cool stuff. We've been so frustrated by dropdown menus that we've started moving away from them, keeping the most important pages in the main navigation menu while relegating less important pages to footer menus. We'll give this a try. I'm optimistic that it while make dropdown menus less frustrating. Thanks for the tip!

Arran
open in browser PRO version

August 17, 2012 at 3:49 am

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Great post, the more we can step away from heavy technologies and utilise elegant CSS the better.

Webdesign Lover

August 18, 2012 at 4:57 am

Hey Chris, this is really great tutorial for creating a pure css dropdown menu. As I love to design, I always prefer to use CSS for style because CSS is really much smoother than option.

Jon
Awesome tutorial, that's a beautiful menu!

August 18, 2012 at 10:37 pm

Sohail Gul
Awesome tutorial Thank you Chris!!!!

August 19, 2012 at 11:05 pm

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Mark Narusson

August 20, 2012 at 11:40 am

Great tutorial. Looks nice and clean love it dude.

abhinav singh
it's cool tutorial.loved it :)

August 21, 2012 at 4:44 pm

Kuldeep
misleading . it must be

August 21, 2012 at 6:01 pm

It dosent work in ie9 > Which is really sad! I think post title is

How To Create a Pure "CSS3" Dropdown Menu.

nice code otherwise.

jenny

August 23, 2012 at 10:57 pm

very well written tutorial. that is how a tutorial should be. HOwever, i see the demo, the sizes of the button and navbar are pretty big.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Ofcourse i can tweak it.

good work

thanks

web design south wales

have issues with IE?

August 24, 2012 at 9:54 pm

Good tutorial but does have some IE issues although who doesn't

Justin

August 25, 2012 at 5:01 am

Where did you learn to create a pure CSS drop down menu.

walif

August 27, 2012 at 4:37 am

It was so amazing post and awesome collection so that i share it my cousin and FB,Twitter friends.Great writer.Care on and write open in browser PRO version Are you a developer? Try out the HTML to PDF API
pdfcrowd.com

good content more beautiful pics.

Comments are now closed

About Line25
Line25 was built in March 2009 by Chris Spooner, a designer with a passion for all things creative. Line25 aims to provide web design ideas and inspiration through articles, tutorials and examples of stunning site designs. Keep up to date by subscribing by RSS, Email, or join Line25 on Twitter.

Most popular posts

How To Design a Custom YouTube Background Rounding Up the Top 10 jQuery Lightbox Scripts How To Create a Pure CSS Dropdown Menu 15 Tutorials To Help You Build WordPress Themes Create a Stylish Contact Form with HTML5 & CSS3

Copyright Chris Spooner. All rights reserved

Privacy policy

Advertise on Line25

64467 Subscribers

Page loaded in 0.420 seconds

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com