Get documents about "CSS
Document Sample
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Creating a pure CSS dropdown menu
IN REDEVELOPING THE VENTURELAB SITE WE BECAME INCREASINGLY AWARE THAT Hi there, I am Harry
there was a lot of content that needed navigating extremely simply Roberts. I am a 21
and fairly rapidly. We have so much to say and such a lot of year old web
content that the navigation of the site needed to be even more developer from the
dynamic and encompassing than normal. UK. I Tweet and write
about web standards,
Demo typography, best
practices and
everything in between.
This article has been ported from the now-defunct
You should browse
Venturelab Devblog, where I had originally authored it.
and search my
archives and follow me
Each page features a sub-navigation area, which links to all the on Twitter, 7,791
other pages within that section of the website. This is great, and people do.
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 @csswizardry
FAQs from there. This is by no means unacceptable, but we like to
go that extra step at Venturelab… Dribbble
RSS Feed
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
$4 Domains for the 4th
For $4, you have the freedom
What a dropdown menu provides is a hierarchical overview of the to dream big with (mt) Media
Temple.
subsections contained within the menu item that spawned it.
Basically, it lists all the subsections within a section of a site when via Ad Packs
you hover your mouse cursor over it.
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 1/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
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.
u d"a"
<li=nv>
l>
<i
a rf""Hm<a
< he=#>oe/>
/i
<l>
l>
<i
a rf""Aot/>
< he=#>bu<a
u>
<l
l>a rf""Te rdc<a<l>
<i< he=#>h pout/>/i
l>a rf""Me h em/>/i
<i< he=#>etteta<a<l>
/l
<u>
/i
<l>
l>
<i
a rf""Srie<a
< he=#>evcs/>
u>
<l
l>a rf""Svc n<a<l>
<i< he=#>eieoe/>/i
l>a rf""Svc w<a<l>
<i< he=#>eieto/>/i
l>a rf""Svc he<a<l>
<i< he=#>eietre/>/i
l>a rf""Svc or/>/i
<i< he=#>eiefu<a<l>
/l
<u>
/i
<l>
l>
<i
a rf""Pout/>
< he=#>rdc<a
u>
<l
l>a rf""Sal rdc oe<a<l>
<i< he=#>ml pout(n)/>/i
l>a rf""Sal rdc to<a<l>
<i< he=#>ml pout(w)/>/i
l>a rf""Sal rdc tre<a<l>
<i< he=#>ml pout(he)/>/i
l>a rf""Sal rdc fu)/>/i
<i< he=#>ml pout(or<a<l>
l>a rf""Bg rdc fv)/>/i
<i< he=#>i pout(ie<a<l>
l>a rf""Bg rdc sx<a<l>
<i< he=#>i pout(i)/>/i
l>a rf""Bg rdc svn<a<l>
<i< he=#>i pout(ee)/>/i
l>a rf""Bg rdc egt<a<l>
<i< he=#>i pout(ih)/>/i
l>a rf""Eoros rdc nn)/>/i
<i< he=#>numu pout(ie<a<l>
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 2/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
l>a rf""Eoros rdc tn<a<l>
<i< he=#>numu pout(e)/>/i
l>a rf""Eoros rdc eee)/>/i
<i< he=#>numu pout(lvn<a<l>
/l
<u>
/i
<l>
l>
<i
a rf""Cnat/>
< he=#>otc<a
u>
<l
l>a rf""Oto-or<a<l>
<i< he=#>u-fhus/>/i
l>a rf""Drcin<a<l>
<i< he=#>ietos/>/i
/l
<u>
/i
<l>
/l
<u>
As you can see here the markup is simply a series of nested < l s.
u>
d v s,
No verbose IDs/classes, no < i > just rich, semantic code.
The # a < l contains a series of < i s, and any that require a
nv u> l>
dropdown then contain another < l . Notice the dropdown < l s
u> u>
have no classes on them—this is because we use the cascade to
style these, keeping our markup even cleaner.
The CSS
This is where the magic happens—we use CSS to transform a
series of nested < l s into a smooth, easy to use, neat and self-
u>
contained dropdown menu.
* E UE O NLD H S EE ON N H EO AES S /
/ B SR T ICUETECSRSTFUDI TEDM PG' CS*
*------------------\
/------------------*
A
NV
*------------------/
\------------------*
nv
#a{
itsyenn;
ls-tl:oe
otwih:od
fn-egtbl;
agnbto:0x
mri-otm1p;
* la las /
/ Cerfot *
la:et
fotlf;
it:0%
wdh10;
* rn h a bv vrtig le-nomn f edd
/ Bigtenvaoeeeyhn es-ucmeti nee.
oiinrltv;
psto:eaie
-ne:;
zidx5
*/
}
nv i
#a l{
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 3/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
la:et
fotlf;
agnrgt1p;
mri-ih:0x
oiinrltv;
psto:eaie
}
nv {
#a a
ipa:lc;
dslybok
adn:p;
pdig5x
oo:ff
clr#f;
akrud#3;
bcgon:33
etdcrto:oe
tx-eoainnn;
}
nv :oe{
#a ahvr
oo:ff
clr#f;
akrud#bc6
bcgon:603;
etdcrto:neln;
tx-eoainudrie
}
*- RPON -*
/--DODW --/
nv l
#a u{
akrud#f; * dig akrud ae h rpon ok rpry n E+
bcgon:ff / Adn abcgon mkstedodw wr poel i I7.M
akrudrb(5,5,5,) * u! e' ae h akrud ul rnprn
bcgon:ga2525250;/ Bt Ltsmk tebcgon flytasaet
itsyenn;
ls-tl:oe
oiinaslt;
psto:boue
et-99x * ie f-cen hn o edd ti s oe cesbe hn ip
lf:99p;/ Hd ofsre we ntnee (hsi mr acsil ta ds
}
nv l i
#a u l{
adn-o:p; * nrdcn adn ewe h i n h ie h lui
pdigtp1x / Itouigapdigbtentel adteagv teilso
la:oe
fotnn;
}
nv l {
#a u a
ht-pc:orp * tp et rpig n raig ut-ie rpon tm /
wiesaenwa;/ So tx wapn adcetn mliln dodw ies*
}
nv ihvr l * ipa h rpon n oe /
#a l:oe u{/ Dslytedodw o hvr*
et0 * rn ak nsre hn edd /
lf:;/ Bigbc o-cenwe nee *
}
nv ihvr { * hs rae esset oe tts enn h o-ot ik ty
#a l:oe a / Teecet pritn hvrsae,maigtetpms ln sas'
akrud#bc6
bcgon:603;
etdcrto:neln;
tx-eoainudrie
}
nv ihvr l { * h esset oe tt os oee rae lbl tl o i
#a l:oe u a / Tepritn hvrsaede hwvrcet agoa syefrl
etdcrto:oe
tx-eoainnn;
}
nv ihvr l i :oe{ * ee e eie h ot xlct oe tts-ht apn
#a l:oe u l ahvr / Hr w dfn tems epii hvrsae-wa hpes
akrud#3;
bcgon:33
}
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 # a l and # a l awill select all list items
nv i nv i
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 4/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
and links in the dropdowns too. Here we’re using the cascade
sensibly.
One thing of note however is applying p s t o : e a i e to the
oiinrltv;
list items, this allows us to use p s t o : b o u e on the nested
oiinaslt;
<ls
u> later on.
The nested lists
nv l
#a u{
akrud#f; * dig akrud ae h rpon ok rpry n E+
bcgon:ff / Adn abcgon mkstedodw wr poel i I7.M
akrudrb(5,5,5,) * u! e' ae h akrud ul rnprn
bcgon:ga2525250;/ Bt Ltsmk tebcgon flytasaet
itsyenn;
ls-tl:oe
oiinaslt;
psto:boue
et-99x * ie f-cen hn o edd ti s oe cesbe hn ip
lf:99p;/ Hd ofsre we ntnee (hsi mr acsil ta ds
}
Here we have the CSS that controls the < l s nested within the
u>
top level list items. Obviously we need to remove bullets with
l s - t l : o e , then p s t o : b o u e to position the
itsyenn; oiinaslt;
dropdown above the list item that holds it.
ipa:oe…
A b etter, more accessib le solution than d s l y n n ;
The next line however is a point of interest. Usually, most people
would use d s l y n n ;to hide the dropdown while it’s not
ipa:oe
being used, but due to a lot of screenreaders ignoring anything
with d s l y n n ;applied, this is very inaccessible. What we do
ipa:oe
instead is take advantage of the fact the < l is absolutely
u>
positioned and just position it - 9 9 xoff screen when not in use.
99p
Next up we declare o a i y 0 for the hidden < l and then a
pct:; u>
Webkit only declaration which will smoothly fade the < l in from
u>
fully transparent when hovered.
nv l i
#a u l{
adn-o:p; * nrdcn adn ewe h i n h ie h lui
pdigtp1x / Itouigapdigbtentel adteagv teilso
la:oe
fotnn;
}
nv l {
#a u a
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 5/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
ht-pc:orp * tp et rpig n raig ut-ie rpon tm /
wiesaenwa;/ So tx wapn adcetn mliln dodw ies*
}
nv ihvr l * ipa h rpon n oe /
#a l:oe u{/ Dslytedodw o hvr*
et0 * rn ak nsre hn edd /
lf:;/ Bigbc o-cenwe nee *
}
Ab ove: The 1px gap achieved b y the p d i g t p 1 x applied to the list-item
adn-o:p;
Here we set up the default list item and link styles. Notice the
padding-top:1px; on the < i . As all the colours etc are applied to
l>
a,
the < > putting a 1px padding on the < i in effect pushes the
l>
a —and
<> therefore the colour—away from the edge of the list
item, giving it the illusion that they are all separated. Interestingly,
IE will not recognise the layout of the < i when hovered, closing
l>
the dropdown again. To get round this, I added a 1×1px
transparent g fimage as a background. Also here we remove the
i
floats applied earlier.
nv l ,
Next, on # a u a we apply w i e s a e n w a ;to prevent
ht-pc:orp
items wrapping onto two lines, ensuring a consistent display.
And this is where the magic happens…
The final bit of code is the bit that actually makes the dropdown
appear when the list item that contains it is hovered. Now, as the
: o e pseudo-class
hvr only works on the < >element in IE6, the
a
dropdowns won’t work in that browser. That can be alleviated by
using a variety of fixes. However, as dropdowns are progressive,
then we’re okay with them not working. If you do however want
to get this working in IE6 then my favoured solutions is by using
behaviours.
nv ihvr { * hs rae esset oe tts enn h o-ot ik ty
#a l:oe a / Teecet pritn hvrsae,maigtetpms ln sas'
akrud#bc6
bcgon:603;
etdcrto:neln;
tx-eoainudrie
}
This gets tricky, b ut it should make sense.
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 6/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
This block of code here is where the hover styles come in, there’s
a bit of nifty code in there which controls what we’ll call
‘persisting hover states’ on the top level item even when the user
is hovering the dropdown items…
# a l : o e ais
nv ihvr what allows you to give the top level link a
persisting hover state when hovering its ‘children’. This works by
styling every link inside a list-item when that list-item is hovered.
This bit gets a bit tricky but bear with me:
The dropdown < l sits inside an < i .
u> l>
a)
If you are hovering over a link (< > in a dropdown (< l ) then
u>
you are also, at the same time, still hovering the top level list-
item (< i ) as you are hovering content inside it.
l>
Because you are technically still hovering the top level list-item,
the # a l : o e aremains true, leaving a persisting hover
nv ihvr
style on the top level list-item’s < >so…
a
…by hovering a dropdown item you are still hovering the top
level list-item which means the cascade still styles all links in that
list-item. Phew!
nv ihvru a * h esset oe tt os oee rae
l ri lbl tl o i
# a l : o e HOME { / T e pABOUTt n h v r s a e d e h w v r c e t a g o a s y e f r l
etdcrto:oe
tx-eoainnn;
} ARCHIVES RESOURCES
CSS CONTACT
Here we override certain aspects of the persisting hover state so
that the dropdowns differ from the top level link. In this case we
merely decide not to underline them.
We also add a touch of Webkit goodness, telling the links to
transform. - e k t t a s t o : w b i - r n f r 0 0 5
wbi-rniin-ekttasom .7s
l n a ;tells
ier Webkit to animate the - e k t t a s o mwe apply
wbi-rnfr
later on in the code over 0.075 seconds with no fade-in/out. Look
out for the initiation of this in the next (and final) block of CSS.
nv ihvr l i :oe{ * ee e eie h ot xlct oe tts-ht apn
#a l:oe u l ahvr / Hr w dfn tems epii hvrsae-wa hpes
akrud#3;
bcgon:33
}
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 7/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Final word
View demo…
So, there you have it. A simple concept pulled off with some very
lean markup and some clever CSS and progressive enhancement.
It’s totally accessible, the markup is semantic and sensible and it
relies on no weighty Javascript libraries to work.
Hopefully my write-up makes sense. but if anything is unclear
leave a comment and one of us in the dev team will try and set you
right. Or, you could just copy/paste the code and hack it apart for
yourselves.
Tw eet 84 Follow @cssw izardry 12.3K follow ers
By Harry Roberts on Thursday, February 17th, 2011 in Web Development. Tags:
CSS, CSS3, HTML | 88 Comments »
+
← Pure CSS(3) accordion Mobile business card →
88 Responses to ‘Creating a pure CSS dropdown menu’
Nathan said on 17 Feb ruary, 2011 at 8:06 pm
Awesome! Was just working on a JavaScript solution for a project
and I think I’m going to go with this construct instead. Thank you!
Using just the mark-up you’ve set here, the nested list items aren’t
lining up correctly during the hover state. I’m too much of an
HTML/CSS newb to figure out why and where to adjust though.
Any thoughts?
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 8/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
DuMaurier said on 18 Feb ruary, 2011 at 2:32 pm
I created something similar but added some CSS3 to animate the
drop down. Let me know what you think. Obviously, the animation
only works in WebKit, Firefox 4 and Opera.
http://vogtjosh.com/nav/
Cynthia said on 18 Feb ruary, 2011 at 6:14 pm
I noticed on IEs, that you pretty much cannot hover below the first
item in the dropdown before the dropdown disappears. You can,
but you have to be quick about your movements otherwise it
disappears. So this almost renders the dropdown useless for any
IE user who isn’t willing to figure out how to “trick” this dropdown
into working. I’ve noticed this same problem on a lot of
dropdowns, and I’m not sure what it is that’s causing it not to
allow time to move onto the next item.
Nick said on 19 Feb ruary, 2011 at 9:23 pm
@Cynthia
I’ve noticed the same thing in IE. I believe it has to do with the not
expanding to encompass all of the tags, so in the margin between
list items, the mouse is no longer in the tag, so the dropdown
dissapears. That’s my very unprofessional opinion.
Damon said on 21 Feb ruary, 2011 at 12:35 pm
@Cynthia -
Nick is right. The spacing between the list items is just that – space
– and if your mouse is hovered over that, it’s no longer on a list
item, removing the dropdown from view. If the spacing is not
their, it works fine.
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 9/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Steve Hickey said on 22 Feb ruary, 2011 at 3:15 am
great article, thanks for the explanations. I’m running into one
small problem with my implementation. my #nav li items have a
specific width set so they are all the same, and this width is
applying itself to the dropdowns. I can override them later in the
style sheet you set, but this makes them all the same width instead
of allowing their width to be determined by the widest item in
them. is there any way you know of to get around this other than
applying classes with specific widths? I want to avoid that for the
sake of flexibility
Alex said on 24 Feb ruary, 2011 at 4:12 pm
Thanks for the walkthrough. I’ll be using SuperFish to overlay this
with javascript. I’ll post it when I get it up.
Hugh said on 1 March, 2011 at 2:27 pm
Hi,
I just looked at your article on the drop down menu – awesome. I
am not experienced in this stuff so it’s a little hard to get my head
around it. I was hoping that you could help me with a question.
All of the links, the top line and the menus that drop, are spaced
equally apart. I have a situation where the distance between link
one and link two might be 100px, but the distance between link
two and three may only be 80px. Can I achieve this? Or would it
have to be separate menus?
I really appreciate any help you might be able to give.
Thank you!
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 10/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Hugh
alex08 said on 8 March, 2011 at 10:38 am
I just looked at your article – awesome. A couple of days ago I run
into one small problem with my implementation of a drop down
menu.
I find it easy to understand and very well explained.Keep up the
good work :)
Thanks for sharing.
alex
Lisa said on 9 March, 2011 at 2:19 am
Hi Thanks for the info. Do you know how to make the hover state
persistent when the particular page is displayed. For example
once you go to a page in the navigation – say it is ‘contact us’ then
the navigation button ‘contact us’ stays in the hover colour. Once
you move away from ‘contact us’ the next page displays the
consistent hover state of the selected page.
I would love it if you could help on this!
Eric said on 12 March, 2011 at 7:33 am
Thanks for this! I am having one small problem though. I started a
HTML document and a new style.css sheet. I put the two blocks of
code in their respective places.
It works great except the drop downs and off set from their
parent list item. So for example, when mousing over Services, the
drop down list is bumped over to the right by about half an inch.
In the demo version, the edge of the drop down is aligned exactly
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 11/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
with the edge of the parent item.
Any help or direction on where to start fiddling would be great.
Thanks
Eric said on 12 March, 2011 at 8:19 am
Sorry for the double comment, but I wanted to clarify that I have
tried this multiple times. Both in new blank HTML/CSS documents
and into copies of my existing site. Same thing occurs. I’ve tried
copying the code listed in the article as well as the code from
viewing the page source.
It all works great except for the alignment issue…
Thanks!!
Mike said on 15 March, 2011 at 12:49 pm
Hey,
first of all – thanks for sharing :)
I’ve run into a problem though… I’m currently developing a WP
theme, and simply when i put your
/* dropdown */
#nav ul
the whole nav disappears. Would you mind helping me with any
solution?
Thanks in advance,
Mike
Dillon said on 18 March, 2011 at 1:03 am
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 12/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Eric,
I had the same problem. I fixed it by adding some css for lists. Try
putting this into your css:
ul, li
{
margin:0;
padding:0;
}
Sid said on 9 April, 2011 at 3:21 pm
Thanks mate! Swish CSS only menu solution!
James Clontz said on 12 April, 2011 at 2:23 am
http://thesoulofashark.com/
So I utilized your code on my website, but the drop down menus
don’t line up vertically.
Lynn said on 13 April, 2011 at 12:20 pm
I’m using ie8 copy and pasted your exact code. Menu doesn’t drop
down. Working fine in firefox. Is there something missing? from
what is display on the copy/paste version versus the demo
version?
dp said on 15 April, 2011 at 9:18 pm
Hover over in IE will disappear in between items. To fix this, you
can add a background to the #nav ul li tag.
Thanks for the post
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 13/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
IT-Monkey Pete said on 18 April, 2011 at 10:14 am
I have a nice little work around for the disappearing menu /
spacing issue in IE…
replace:
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the
a give the illusion spaced items
*/
float:none;
}
with:
#nav ul li{
padding: 0; margin: 0;
border-bottom: 1px solid rgb(255,255,255);
border-bottom: 1px solid rgba(255,255,255,0);
float:none;
}
The trick is to use a 1px totally transparent border to create the
spacing effect!
Let me know if works for you guys!
Paul Holtzheimer said on 19 April, 2011 at 1:53 am
I want to use your construct of drop down menus. I’m using
Windows 7; IE9; and Frontpage.
However, when I directly copy over the source of your example, I
don’t get dropdowns, I get a vertical list showing the preliminary
title for the list and under it the “link” for each:
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 14/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
title 1
link 1
link 2
link 3
title 2
link 1
link 2
link 3
Can you give me some advise as to why it’s not working? Thanks!
Paul Holtzheimer said on 19 April, 2011 at 1:54 am
Thanks for sharing by the way. It’s really appreciated.
nathan said on 27 April, 2011 at 2:07 am
Trying to work my way through the sample but I’m just getting a
vertical list of all the links.
I noticed that the demo at the top of the page works but the
sample linked to at the end of is broken with the same problem
I’m having.
John Darling said on 9 May, 2011 at 4:32 am
Well done Harry, thanks for the tip about whatever:hover very
useful! One comment I have to improve the semantic markup of
this menu, would be to wrap the the entire menu with a < a >
nv
element. If you are gonna use css3 might as well use a little html5
markup to round it out :)
John Darling said on 9 May, 2011 at 4:43 am
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 15/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Oh and you can remove the -webkit-border-radius, Chrome and
Safari now accept the standard css3 property “border-radius”.
That should save another few lines of code :)
drewber09 said on 17 May, 2011 at 4:27 pm
To Fix the IE7 issue were going past the first record causes the list
to be removed.
Add
background-image : url(../images/SP_main/1×1-pixel.png);
with a 1×1 transparent image to the
#nav ul {}
This was found on google for this exact type of control.
Seems ie7 doesnt handle background: Transparent very well.
If it is a solid color it works the same but who wants color. :)
Gemma said on 18 May, 2011 at 10:26 am
Hi I really like this and I was just wondering if you had any tips on
how to make this go down another level so you would hover over
Services > Service One > Service Two. Hope that makes sense and
any help on creating that is appreciated.
Kev said on 18 May, 2011 at 3:49 pm
Works great.
Would be even better if it had sub menus in the dropdowns.
Has anyone managed to get that working?
I suspect adding…
#nav ul ul { }
#nav ul li:hover ul { }
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 16/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
…with appropriate code so it appears next to the link in the
dropdown would get that to work but been unable to get it
working at all.
Josh said on 20 May, 2011 at 1:25 am
I was having the issue with the misalignment of the dropdown
menus also. I’m not sure if this will work for everyone, but I added
“padding: 0;” to my #nav ul section and it fixed the issue. Here’s
the exact section of code as it appears now:
#nav ul{
padding:0;
list-style:none;
position:absolute;
left:-9999px;
opacity:0;
-webkit-transition:0.25s linear opacity;
}
Jim said on 5 June, 2011 at 1:01 pm
i’m having problems trying to center the menu… can anyone help
me?
Jim said on 5 June, 2011 at 1:36 pm
Nevermind..i found the solution…just add this to the css code
.wrapper {width: 500px; margin: 0 auto}
And put the ” … ” tag inside this tag:
“….
The width in wrapper can be modified as you need.
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 17/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Pete said on 8 June, 2011 at 9:53 am
This is great and people’s comments have really helped me.
Now I’ve put some content below the menu, I’m finding the
dropdown items go ‘behind’ the position of the next positioned
div and don’t get the mouse focus.
I’ve got myself into a bit of bind here by using the lists nested in
other positioning css elements, but it seems that you have to be
careful of what container the text is in if you want the menu to
ride over it.
Sorry if that’s not clear – I’m a diy-er not a developer.
Zoe said on 13 June, 2011 at 7:44 am
@Pete- giving the nav id a higher z-index fixed that for me.
MikeD said on 28 June, 2011 at 3:37 pm
Hi,
I noticed you add some code other than what you show to display
your Demo by looking at the source of that page.
What exactly keeps the menu items in a fixed position, even when
the window width is smaller than the menu width.
I cannot keep my menu fixed when a users resolution is low or
when they have the page opened in a small window.
Thanks!
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 18/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Kevin said on 29 June, 2011 at 12:22 am
I have implemented this wonderful concept into a development
website and I am also using AJAX calls to replace content which is
unfortunately underneath the drop down menu. Other javascript
menus hide themselves upon the click event, or at least go away
with the page refresh. Such is not the case here so the user
experience is a little weird with the menu staying put. I have not
been successful in applying any sort of javascript function to hide
the drop down elements. How can I stop the hover?
imbritney said on 11 July, 2011 at 7:02 am
@Gemma & Kev -> I think I got the three-layer menu to work
using the following:
#nav ul, #nav:hover ul li ul, #nav:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 180px;
}
#nav:hover ul li:hover ul, #nav:hover ul li:hover ul li:hover ul {
position:absolute;
display:block;
left: 182px; top: 32px;
}
#nav ul li ul, #nav ul li ul li ul {
clear: left;
margin-top: -30px;
}
I know, I know, I went back to display:none and display:block, but
it was easier for me to follow. I still need to add back in the
invisible padding to make it work in ie…
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 19/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Charlotte Quest said on 17 July, 2011 at 7:24 pm
I like your drop down menu. But I would like to know how to add
third level sub categories?
chris said on 22 July, 2011 at 10:45 am
great drop down menu and instructions… tweaked it slightly to
what I wanted and works perfectly :)
only problem I had was that the drop downs were aligning 40px
to the right… so using the following suggestion off josh did the
trick:
“#nav ul{
padding:0;
list-style:none;
position:absolute;
left:-9999px;
opacity:0;
-webkit-transition:0.25s linear opacity;
}”
Cheers!
Cristina said on 27 July, 2011 at 1:40 pm
Hi.
The article above is a bit too much for me :P I mean yeah I do
undestand the basics and if I had time I would suss it out entirely.
But I’m a bit anxious to finish a project.
Of all things, I love the simple ones even though they sometimes
don’t look as good. I have therefore set up a menu with a similar
markup as the example:
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 20/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Item one
item one variant one
item one variant two
item one variant three
item two
variant 1
variant2
variant3
variant4
The classes are controlled via an external css page. That’s also
where I have entered the folowing:
#navigation li ul
{
display:none;
}
#navigation li:hover ul
{
display:block;
}
In firefox, it works like a charm. But seemingly IE7 (the one I’m
testing with) simply does nothing other than display the items
without the variants, in spite of hovering over the items.
Before you ask: I like my ’solution’ better because it works
(somewhat :P) and because it’s completely devoid of graphical
‘tassels’. I could of course chew through the code above and
‘produce’ something akin, but…. I’ve an issue with using something
someone else has made. I wanna do it meself. And thus far what
I’ve done works. For Firefox. I’ve only begun coding like 2 weeks
ago (yeah I promised my guild master a completely new guild site)
but the more I code, the more I realize that IE is…. well…. an ms
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 21/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
thingy and as such it only does whatever it wants to do and….
(enter here the typical frustration everyone has experienced at
least once in a lifetime when facing the monumental you know
what of MS :P) I am quite sure you are catching my drift.
So my question is: do I always have to talk differently to IE (like
opacity or gradiented backgrounds)?
Yeah I could tell people, look, if you use IE you won’t be able to
navigate the page. But when it comes to people who play a daft
online computer game, I am pretty sure they would not know
what a browser is if it hit them in the face. Repeatedly. Like it does
when they go to faceboo… you know what I mean. So, if possible, I
would love to give them something IE can actually deal with? :)
Many thanks for the hand.
P.S.: I know, my style is a bit childish and all. Rest assured that I am
not. Childish, that is. I can be serious (and swear in a very
colourful manner at the unequity of programming) but I’d rather
joke about and avoid unnecessary frustration :)
DanD said on 29 July, 2011 at 2:12 am
Great dropdown menu, well done thanks for sharing!
@MikeD, have you found a solution to
“What exactly keeps the menu items in a fixed position, even when
the window width is smaller than the menu width.”
I’m experiencing the same problem. Using WYSIWYG program like
Dreamweaver, menu position differs between design & live views.
I’ve tried wrapping the entire html code above in a div with an
absolute position but the dropdown menu will reposition about 5
px from the left & 5 px from the top when uploaded to my server
as well as in live view.
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 22/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Any suggestions?
Cristina said on 1 August, 2011 at 2:48 pm
Yup I think I might have found the solution. Or at least the
explanation for the behaviour. I know it’s bad practice but at least
for the time being I don’t set the doctype. Firefox seems to be
flexible enough to allow the dropdown to work properly. IE
however does not take kindly to quirky stuff. Oh well. :P
The Path said on 25 August, 2011 at 12:03 pm
Yeh IE is still so far behind in so many areas.
I had this problem recently and I think someone mentioned above
that assigning a background image sorts it. So I added a
transparent 1px X 1px png and repeated it across the background
of the dropdown section (#nav ul ul).
Not ideal but hey it works. Feel like I spend half my time finding
hacks for IE. I might bill Microsoft! ;)
Einsteine said on 6 Septemb er, 2011 at 2:48 pm
Hi! I have a problem using this. I’ve copy-pasted your code to test
it.
When I test the menu in Chrome, Opera, Firefox it works great.
When using IE8 it doesn’t work. The submenu are not displayed.
And here is another thing, when I test your demo on IE8 it works
perfectly.
Could someone help me with this? Any ideeas why is this
happening?
Einsteine said on 7 Septemb er, 2011 at 9:47 am
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 23/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Found the solutin… I was missing the DOCTYPE line from my page.
Now it works fine. :D
Joanne McAlpine said on 19 Septemb er, 2011 at 2:14 pm
Thank you for this information, I will bookmark your page and I
voted for you for the .net magazine awards – thanks again.
Dushan said on 21 Septemb er, 2011 at 1:38 am
I copied your code to test it. But sub menus are not displayed. I
think it’s a problem with my browsers. I checked it in Chrome,
Firefox 6, and even in Internet Explorer. And also some other CSS
styles are also not displayed in my browsers. Can you help me?
kapil gupta said on 21 Septemb er, 2011 at 12:00 pm
Hi , I have applied padding zero through javascript as given below
for IE 9 but padding is not set, its take extra white space below the
text. its user control make in javascript and i am using the user
control in a website.please help me.
selectBox.style.padding=0; // Not works in IE 9.
Thanks And Regards
Kapil Gupta
INDIA
Peter said on 23 Septemb er, 2011 at 12:58 am
The CSS works and is pretty standard, but it is awfully inefficient.
Check out:
http://nekkidblogger.com/2011/ultra-efficient-css-html-drop-
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 24/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
menu-nekkidblogger-menu/
Best,
Peter
Michele said on 23 Septemb er, 2011 at 6:23 pm
Thanks, Jim!
I was also having trouble dropdown list misalignment. #nav ul
{padding:0} fixed it for me, too.
Regards,
Michele
Michele said on 23 Septemb er, 2011 at 6:56 pm
For those who are still having difficulty with the dropdown display
disappearing when you hover the mouse, perhaps this is
something:
I had trouble with this in Firefox (3.6.). It rather magically began
to function when I added text-decoration:underline; to the #nav
li:hover ul li a:hover. Although I am not sure why; just thought I
would several things and this one worked!
Time to check other browsers now. :)
Cheers,
Michele
Jennifer said on 26 Septemb er, 2011 at 12:40 am
In cases where all the submenu items for a particular main list
item are shorter than the main list item, the submenu does not
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 25/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
equal the width of the main list item. This looks silly. Does anyone
know how to get the submenu to be at least as wide as the main
list item without having to define a set width for the submenus?
John Moriarty said on 27 Octob er, 2011 at 7:41 pm
Can someone please help me out and tell me where I’ve gone
wrong with my implementation of this code! I have gone through
line by line but am darned if I can see a mistake! It works fine in
Chrome but the drop downs will not display on IE (8 or 9) – I just
can’t see where it’s gone awry.
http://j-moriarty.co.uk/cssdrop/index.html
Very grateful for any assistance!!
Olan said on 2 Novemb er, 2011 at 6:15 pm
I love this script, but I am havign trouble with cusomizing one
aspect. I’d like for the top menu items themselves to not change
background color/text appearance when the mouse rolls over
them (just have the dropdown appear below). For the life of me, I
can’t seem to make this work.
Any ideas?
John Moriarty said on 4 Novemb er, 2011 at 11:41 pm
@Olan you’ll need to modify the:
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 26/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
#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:#6b0c36;
text-decoration:underline;
}
entries as it’s those two bits that control the display of the menu
item when you hover on it and when the sub menu is displayed. If
you want it to not change from the non-hovered style then I
suspect you can just delete the background color lines – or just
copy what’s in the unhovered entries.
Can noone help with my IE implementation?! Still flumuxoed as to
why it’s fine in Chrome but doesn’t display the sub menu in IE!
http://j-moriarty.co.uk/cssdrop/index.html
Rebecca said on 9 Novemb er, 2011 at 7:44 pm
@John, I have found that it needs to have this at the top of the
html page before the tag for it to work in IE
John Moriarty said on 15 Novemb er, 2011 at 9:28 am
@rebecca – your text didn’t display correctly, but you were
completely right! The HTML header needs to start:
<!DOCTYPE html>
<html lang=”en”>
<
and it works fine in IE now! Many thanks indeed!
Michele said on 29 Novemb er, 2011 at 6:37 pm
Thanks again for the design!
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 27/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
At last, the new css dropdown menu up and running. The problem
that ultimately held me up was z-indices. Even with background
color the dropdown was not displaying in IE until I added
ascending z-indices to every element of the nav bar css.
The tip that led me to this solution was here:
http://www.quirksmode.org/bugreports/archives/2006/01/Expl
orer_z_index_bug.html
You can see my own dropdown here: http://cmrs.osu.edu/.
Good luck!
Michele
Jeff Kee said on 4 Decemb er, 2011 at 12:31 am
well written – I had a code of my own but I had trouble setting the
width and all. Never thought of the nowrap solution.. duhhh haha.
It’s great to have amazing resources like yours to reference to.
Thank you very much!
D'oh said on 21 Decemb er, 2011 at 4:23 am
I’ve tried to implement this on a site I’m working on. It works fine
in everything apart from IE7 and prior. I’m a little confused as
your demo does work in IE7.
http://historyrepeating.org/upm/index.php
The services link should have a drop down but nothing displays in
IE7.
If I zoom out it appears but the CSS isn’t functioning properly.
Any help would be appreciated.
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 28/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
D'oh said on 21 Decemb er, 2011 at 11:40 pm
I got it working using a behavior file called “whatever:hover.
More can be found here – http://divitodesign.com/css/how-to-
dropdown-css-menu/ and here –
http://peterned.home.xs4all.nl/csshover.html
Very easy work around.
Paul said on 9 January, 2012 at 9:01 pm
HI,
I have used this here, but for some reason I cannot fix, the
dropdown hover moves when it shouldn’t. Any ideas?
http://www.sharksite.ca/sharktestsites/interpro/index.html
http://www.sharksite.ca/sharktestsites/interpro/interpro-
style.css
Thanks
Ade said on 12 January, 2012 at 12:55 pm
I have used this CSS demo but i cannot get it to be horizontal my
menu is vertical and to the left of the page, can anyone please
help?
Simon said on 22 January, 2012 at 9:05 pm
This was so helpful and I always use this model now. Thank you.
But, if a nested page is ‘current’, how do I highlight the parent, ‘top
level’, nav on the page ?
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 29/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
David said on 24 January, 2012 at 3:14 pm
I have the menus working. Thank you for the demo. I need to be
able to disable some menus and re-enable via javascript. Is that
possible and if so how? Thank you.
Aaron said on 28 January, 2012 at 12:03 am
I have IE 8. i wrote both css and html together in one file. the
dropdown menu isnt working. can someone help me? i have spent
2 hr checking the code over and over. plz
Ron said on 1 Feb ruary, 2012 at 1:10 am
I’m sure this is a quick fix but how can one remove the spacing
between the drop links? I’d like to have one solid color behind the
links.
Any help is appreciated!
MikeR said on 6 Feb ruary, 2012 at 8:01 pm
I need a drop-down effect to appear but it must be enclosed in a
(a button-bar …), and I cannot for the life of me get the pop-up to
appear outside of that div. It is always clipped to the boundaries of
it. I’ve specified “overflow: visible !important;” just about every
place that I can think of.
Justin said on 11 Feb ruary, 2012 at 12:45 am
Is there any way to create a dropdown that can appear over an
AJAX/JS/Flash object (in other words, if your dummy content in
the example were instead one of these file types, is there a way to
set it to always appear above the object?)
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 30/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Inayat Rasool syed said on 11 Feb ruary, 2012 at 1:30 am
I have some strange situation. When I run this project on my
personal computer it works fine in all browsers.
when I load it on Production Server, I can see the drop down
menu in Firefox and Chrome but not in IE 7/IE 8. My project users
dont use IE 9 so did not test on it.
Please let me know if anyone know about it. Thanks.
david said on 18 Feb ruary, 2012 at 3:00 pm
works great and i am able to change elements like colour etc. but i
would like to know what i will need to put in CSS/HTML to apply a
third level sub menu. if anyone could help me on this that would
be great!
Ade said on 23 Feb ruary, 2012 at 10:36 am
My menu works in FF and Internet explorer but not in safari and
chrome can anyone help please.
Oli said on 23 Feb ruary, 2012 at 11:56 am
Try adding min-width to #nav li li to fix in IE7!! Took me ages to
figure this out…
Ryan said on 14 March, 2012 at 3:35 am
Thanks for this, especially the line-by-line explanation. It helped a
great deal trying to get it working and looking right on my site.
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 31/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Andrea said on 2 April, 2012 at 9:01 pm
This is so freaking awesome! And easy to understand with all your
great comment break-down. Used it for the first time for a client
site here: http://www.habitatmvi.org (for the “About Us” tab.
I avoid javascript wherever possible so this was glorious to find.
Thank you!!!
Andrea
Ebony Creek Web Design
Sasha said on 6 April, 2012 at 2:09 pm
Hello there. This tutorial is really helpful. Thank you.
But there’s a question i would like to ask,
When I hover the list, then sub-items are floating to the right?
I am not sure why is it like that..
Robert Thompson said on 23 April, 2012 at 10:19 pm
the nav bar works but when it comes to hovering over the
dropdown boxes the page flashes as if the css isnt working n then
pops back up, not sure why it isnt working. hopefully ive just made
a silly mistake.
Gavin said on 26 April, 2012 at 7:39 am
Here’s what I added to remove the spacing between the list items
in the drop-down list (solid colour drop-down menu). I’m sure it’s
not the best method even though it works. Hope others might find
it useful!
#nav li ul li:first-child {
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 32/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
margin: 0px;
}
#nav li ul li {
padding: 0px;
margin-top: -7px;
}
Gavin said on 26 April, 2012 at 8:28 am
Please ignore the previous comment. The additional lines of script
should be:
#nav li ul li {
padding: 0px;
margin-top: 0px;
}
Sahilz said on 30 April, 2012 at 3:21 am
Sir,
I’m very new to webdesigns and all but very much keen at
learning. I may sound real stupid with this question but. .how do i
incorporate the codes into my web script?
a. Do i just copy the first set of codes> paste it between the body
tags and make a separate css file with the name style.css?
b. i just copy the first set of codes, sit back and wait for the miracle
to happen!
How do I get this work? As from all the comments above, I’m
pretty sure this is a brilliant scrip! So please help me!
Godspeed.
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 33/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Sz
Al said on 3 May, 2012 at 10:37 am
Hi. This is great but when you have a double navigation i.e. one
row of menus on top of the other. When you then hover over
those menu items the dropdowns that appear go behind the next
set of nav items, regardless of whether you set the z-index on the
#nav. Any ideas?
Al said on 3 May, 2012 at 11:14 am
@Al (that’s me!).
Just realised what I needed to do. As well as add a z-index to the
main ul I also needed to add a z-index to the sub ul and also give
that a relative property.
Mike said on 4 May, 2012 at 4:10 pm
How would I insert space/margin between the main s?
Mike said on 4 May, 2012 at 4:13 pm
I probably should have been more clear: how could I insert space
between just two of the s?
vijayanand said on 4 May, 2012 at 9:44 pm
Hi,
Thanks for publishing and sharing.
I really liked the li:hover property and the way is been used.
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 34/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
Would for sure this in my projects.
Thanks once again
Vijay
Jonas said on 14 May, 2012 at 12:31 pm
Anyone know how to make a drop-UP menu? :)
Tried some differences.. but can’t find any good sollution..
Kevin said on 2 June, 2012 at 12:03 pm
Anybody knows how to create third level subcategories?
Andy Wang said on 9 June, 2012 at 9:03 pm
How can you modify it so that the drop downs are centered?
Ryan Rogalski said on 12 June, 2012 at 7:39 pm
I have used this menu twice. The first one went off without a hitch
and displays correctly in all browsers. I copied the CSS and used it
on another website with some minor modifications (colors,
padding) but now it doesn’t display properly in IE7+. Would
someone please help me out and tell me what I’m missing???
Darren said on 13 June, 2012 at 7:44 pm
What if I wanted to have the drop down list for each li stay aligned
left of the parent ul? Currently I can only have it where each li is
float:left and is right below.
I think I explained that horribly.
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 35/36
7/30/12 Creating a pure CSS dropdown menu — CSS Wizardry—CSS, Web Standards, Typography, and Grids…
© Copyright Harry Roberts 2007–2012
csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ 36/36
