CSS-Only Dropdown Menu

ronaldroe · 04-11-2011, 03:28 AM

I wanted a quick dropdown for my website navigation that wasn't scripted, and zero flash. After reading about it, I drilled the code down to only the basics so I could build from that.

So, without further ado, the code below is the CSS-only dropdown menu styled just enough to make the concept look like something you'd expect to use:

HTML

Quote:

CSS

Quote:

ul,li{margin:0;padding:0;}

#dropdown{
list-style-type: none;
margin:50px auto 0 auto;
text-align:center;
width: 303px;
}
#dropdown li{
background-color:#777;
border-right:1px solid #fff;
float:left;
height:25px;
line-height:25px;
width:100px;
}
#dropdown li > ul{
background-color:#777;
display:none;
height:52px;
list-style-type: none;
}
#dropdown li:hover > ul{
display: block;
}
#dropdown li:hover > ul li{
border-top: 1px solid #fff;
float:left;
height:25px;
}
#dropdown li:active > ul li{
border-top: 1px solid #fff;
float:left;
height:25px;
}

You can see this in use on my website navigation, where I've added a lot in the way of style to it, including border radii, background color changes and CSS3 transitions.

Hope some of you find this useful.

EDIT: Added :active pseudo-class to make it touch-friendly.

leroy30 · 04-12-2011, 08:42 AM

Hi ronaldroe,

Any chance you could elaborate on "EDIT: Added :active pseudo-class to make it touch-friendly" for us? I've never heard of this one before..

ronaldroe · 04-12-2011, 01:56 PM

Quote:

Originally Posted by leroy30

Hi ronaldroe,

Any chance you could elaborate on "EDIT: Added :active pseudo-class to make it touch-friendly" for us? I've never heard of this one before..

Basically, I took a shot it the dark and copied the bit of code that makes the menu appear on hover, and changed :hover to :active. Turns out it works. On my website, when you tap "portfolio", at least on my iPhone, it opens the dropdown. Once I did that, I added it here so it would work for other people too. If you look at the last 2 blocks of the CSS, they're nearly identical, except the pseudo-class.

04-12-2011, 08:42 AM	#2
leroy30 Gold Member Join Date: Mar 2010 Location: Auckland, New Zealand Posts: 326	Hi ronaldroe, Any chance you could elaborate on "EDIT: Added :active pseudo-class to make it touch-friendly" for us? I've never heard of this one before.. __________________ DVI web design \| Portable Time Clock

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode