line25 com tutorials how to create a pure css dropdown menu
TRANSCRIPT
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Articles Inspiration Tutorials About Archives Contact
Search…
How To Create a Pure CSS Dropdown Menu
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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.
The menu we’ll 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
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.
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
View the pure CSS dropdown menu demo
<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 we’ll need to create the HTML structure for our CSS menu. We’ll 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>
Subscribe and Download
The HTML Structure
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
<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 sub-
menu. These links are placed into another unordered list and inserted into the “Web
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Design” <li> .
So far this leaves us with a neat layout of links with the sub-menus having a clear
relation to their parents.
nav ul ul { display: none;}
nav ul li:hover > ul { display: block; }
The CSS Styling
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Let’s 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 UL’s 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; }
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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;
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
} 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;
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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 LI’s of each UL in the sub menu don’t need floating side by side, instead they’re
listed vertically with thin borders separating each one. A quick hover effect then darkens
the background to act as a visual cue.
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Tweet 595
396
Like
153 90
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.
View the pure CSS dropdown menu demo
Join the mailing list to have new content delivered straight to your email inbox.
Every subscriber gets a free pack of realistic web shadows.
10
Share
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
August 13, 2012 at 11:07 am
Useful technique, am thinking about using it on future projects.
August 13, 2012 at 11:56 am
great tutorial!!!
will start using dropdown lists from now)
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
AucT
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
August 13, 2012 at 12:22 pm
amazing and easy dropdown menu tutorial
thanks
August 13, 2012 at 12:23 pm
August 13, 2012 at 1:59 pm
Nope. As is the case with nearly every CSS3 element, you'll need
another solution for IE.
Does it work in IE7, IE8?
August 13, 2012 at 12:52 pm
Where is the downloads of arquives?
smashinghub
Andrei
Jason
Fernanda
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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.
August 13, 2012 at 3:07 pm
August 13, 2012 at 9:02 pm
it's a pity that IE sucks.
:-)
It's a pity it is not working with IE.
Greg Tarnoff
Beata
Alex
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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.
August 13, 2012 at 5:45 pm
Not true, Beata – this menu works in IE9+ but not in IE8 and
earlier.
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 drop-
down 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 well-
Garry Conn
Jon Ewing
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
written tutorial.
August 13, 2012 at 6:36 pm
August 13, 2012 at 7:15 pm
The immediate child element the selector met. In this case, the first
ul after the hovered li.
Can anyone tell me what the > means for css? nav ul li:hover > ul
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.
August 13, 2012 at 8:02 pm
Thats cute and awesome.
FvG
Idraki
Seham Syed
Envira
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
I love it,will use in future projects :)
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
August 13, 2012 at 10:02 pm
Works in IE :)
http://necolas.github.com/normalize.css/
Simon Duck
Carlos Campos
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
August 13, 2012 at 10:36 pm
Cracking tutorial! I think I'll 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'm sure!
Thanks Chris :)
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?
August 14, 2012 at 11:58 pm
Brighton Electrician
Steve
canciller
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
thank you, thank you, thank you…
nice tut.
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 :)
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!
Osho Garg
itoctopus
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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".
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!
August 17, 2012 at 3:49 am
fjpoblam
web design springfield mo
Arran
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Great post, the more we can step away from heavy technologies
and utilise elegant CSS the better.
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.
August 18, 2012 at 10:37 pm
Awesome tutorial, that's a beautiful menu!
August 19, 2012 at 11:05 pm
Awesome tutorial Thank you Chris!!!!
Webdesign Lover
Jon
Sohail Gul
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
August 20, 2012 at 11:40 am
Great tutorial. Looks nice and clean – love it dude.
August 21, 2012 at 4:44 pm
it's cool tutorial….loved it :)
August 21, 2012 at 6:01 pm
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.
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.
Mark Narusson
abhinav singh
Kuldeep
jenny
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Ofcourse i can tweak it.
good work
thanks
August 24, 2012 at 9:54 pm
Good tutorial but does have some IE issues although who doesn't
have issues with IE?
August 25, 2012 at 5:01 am
Where did you learn to create a pure CSS drop down menu.
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
web design south wales
Justin
walif
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
good content more beautiful pics.
Comments are now closed
Copyright © Chris Spooner. All rights reserved Privacy policy Advertise on Line25 64467 Subscribers Page loaded in 0.420 seconds
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
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API