26/8/2014

How To Create a Pure CSS Dropdown Menu

How To Create a Pure CSS Dropdown Menu

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.

(http://line25.com/wp-content/uploads/201 2/css-menu/demo/index .html)

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
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

1/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

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.

View the pure CSS dropdown menu demo (http://line25.com/wp-content/uploads/201 2/css-menu/demo/index .html)

The HTML Structure

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

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>
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

2/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

<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>
<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>
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

3/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

<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 sub-menu. These links are placed into another unordered list
and inserted into the Web Design <li>.

So far this leaves us with a neat layout of links with the sub-menus having a clear relation to their parents.
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

4/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

The CSS Styling

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

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.

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

5/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

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;
}

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.

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

6/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

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;
}
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
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

7/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

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;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

8/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

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).

Line25

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.

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

9/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

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

(http://line25.com/wp-content/uploads/201 2/css-menu/demo/index .html)

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

10/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

View the pure CSS dropdown menu demo (http://line25.com/wp-content/uploads/201 2/css-menu/demo/index .html)

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

Subscribe

Written by Chris Spooner

Chris Spooner (/about) 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
(http://blog.spoongraphics.co.uk) or follow his daily findings on Twitter
(http://twitter.com/chrisspooner) .

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

11/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

38 Comments

Line25

Sort by Best

Login
Share

Favorite

Join the discussion

Justin

2 years ago

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

Reply Share

Bob Rockefeller

4 days ago

Have you updated this to handle the responsive design issues with devices not having a :hover ability?
Reply Share

Wren

4 days ago

Love :-) Simple, straightforward, and well-explained. And I really appreciate that you included the styling to make it pretty, not just functional.
Thanks!
Reply Share

just

7 days ago

nice...
thx and god bless you and the world...
a sincere blessing from hong kong..
^___^
Reply Share

walif

2 years ago

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 good
content more beautiful pics.
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

12/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

content more beautiful pics.

Reply Share

web design south wales

2 years ago

Good tutorial but does have some IE issues although who doesn&apost have issues with IE?
Reply Share

jenny

2 years ago

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.
Ofcourse i can tweak it.
good work
thanks
Reply Share

kuldeepdaftary

2 years ago

It dosent work in ie9 > Which is really sad! I think post title is misleading . it must be
How To Create a Pure "CSS3" Dropdown Menu.
nice code otherwise.
Reply Share

abhinav singh

2 years ago

it&aposs cool tutorial....loved it :)

Reply Share

Mark Narusson

2 years ago

Great tutorial. Looks nice and clean - love it dude.

Reply Share

Sohail Gul

2 years ago

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

13/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

Awesome tutorial Thank you Chris!!!!

Reply Share

Jon

2 years ago

Awesome tutorial, that&aposs a beautiful menu!

Reply Share

Webdesign Lover

2 years ago

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.
Reply Share

Arran

2 years ago

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

web design springfield mo

2 years ago

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

fjpoblam

2 years ago

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 acrossthe-top including "Home", "Illustrator", and "Web Design".
Reply Share

itoctopus

2 years ago

A drop down menu in CSS is much smoother that one written in JavaScript - and it won&apost get affected at all if the person chooses to
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

14/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

disable JS on his browser (it&aposll still work).

Thanks for sharing!
Reply Share

Osho Garg

2 years ago

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 :)
Reply Share

canciller

2 years ago

thank you, thank you, thank you...

nice tut.
Reply Share

Steve

2 years ago

I&aposve 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&aposm also wondering, does an advanced search engine crawler like Google&aposs consider this masking or something else that could
reduce the quality of the site as far as the crawler is concerned?
Reply Share

Brighton Electrician

2 years ago

Cracking tutorial! I think I&aposll have to use some of these techniques on my own website.
I designed my website using HTML and CSS only so this will work really well I&aposm sure!
Thanks Chris :)
Reply Share

Carlos Campos

Works in IE :)

2 years ago

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

15/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

Works in IE :)
http://necolas.github.com/norm...
Reply Share

Simon Duck

2 years ago

Thanks for the tutorial. I&aposve recently started a new project and making the mock-up and as I didn&apost want to produce a full blown
thing, just HTML and CSS, I really needed a decent article to follow.
Regards,
Simon Duck
Reply Share

Envira

2 years ago

Thats cute and awesome.

I love it,will use in future projects :)
Reply Share

Seham Syed

2 years ago

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

FvG

2 years ago

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

Idraki

FvG 2 years ago

The immediate child element the selector met. In this case, the first ul after the hovered li.
Reply Share

Jon Ewing

2 years ago

Not true, Beata - this menu works in IE9+ but not in IE8 and earlier.
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

16/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

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&aposs important to have a graphical element that indicates the difference between a menu item with a drop-down or fly-out and one without.
Something like an arrow or triangle to indicate that there is hidden content.
But that&aposs not a criticism of the tutorial. Such niceties are really for the individual designer to add. And this is a very clear and well-written
tutorial.
Reply Share

Garry Conn

2 years ago

You know, drop down menus have always been a challenge for me. For starters, there&aposs so many other sites that provide tutorials on
them, but they&aposre really hard to follow or don&apost 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.
Reply Share

Beata

2 years ago

It&aposs a pity it is not working with IE.

Reply Share

Alex

Beata 2 years ago

it&aposs a pity that IE sucks.

:-)
Reply Share

Greg Tarnoff

2 years ago

This isn&apost 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&apost work. 1 in 5 people struggle to use the web. Using a menu
like this doesn&apost help them.
Reply Share

Fernanda

2 years ago

Where is the downloads of arquives?

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

17/19

26/8/2014

How To Create a Pure CSS Dropdown Menu

Where is the downloads of arquives?

Reply Share

Andrei

2 years ago

Does it work in IE7, IE8?

Reply Share

Jason

Andrei 2 years ago

Nope. As is the case with nearly every CSS3 element, you&aposll need another solution for IE.
Reply Share

smashinghub

2 years ago

amazing and easy dropdown menu tutorial

thanks
Reply Share

Dima Taras

2 years ago

great tutorial!!!
will start using dropdown lists from now)
Reply Share

Web design Maidenhead

2 years ago

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

Reply Share

Subscribe

Add Disqus to your site

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

18/19

26/8/2014

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

How To Create a Pure CSS Dropdown Menu

19/19