TUTORIAL: CSS-Only Dropdown Menu

Status
Not open for further replies.

ronaldroe

Super Moderator
Staff member
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
<ul id="dropdown">
<li><span>MENU1</span>
<ul>
<li><a href="#">MENU ITEM 1</a></li>
<li><a href="#">MENU ITEM 2</a></li>
</ul>
</li>
<li><span>MENU2</span>
<ul>
<li><a href="#">MENU ITEM 1</a></li>
<li><a href="#">MENU ITEM 2</a></li>
</ul>
</li>
<li><span>MENU3</span>
<ul>
<li><a href="#">MENU ITEM 1</a></li>
<li><a href="#">MENU ITEM 2</a></li>
</ul>
</li>
</ul>

CSS
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, #dropdown li:active > ul li{
border-top: 1px solid #fff;
float:left;
height:25px;
}

Hope some of you find this useful.

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

2nd EDIT: Deleted link to my way old site, and combined the :hover and :active pseudo-classes in one declaration to comply with the "DRY" concept.
 
Last edited:

leroy30

New Member
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

Super Moderator
Staff member
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.
 

Frank

New Member
If I click Portfolio on Firefox or Chrome on Android, the submenu opens, but at the same time the page works.html. Which is not surprising, because that is the content of the href of Portfolio.

For a cross-browser two-level menu that works on all platforms and devices, see this tutorial.
 
Last edited:

ronaldroe

Super Moderator
Staff member
If I click Portfolio on Firefox or Chrome on Android, the submenu opens, but at the same time the page works.html. Which is not surprising, because that is the content of the href of Portfolio.

I actually changed that page a while back so tapping "portfolio" would just go straight to works.html. I found it more usable, but in the end, it doesn't matter, since that's the old version of my site.

In fact, I'll just go ahead and remove the link to avoid further confusion.
 

website7

New Member
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


CSS


Hope some of you find this useful.

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

2nd EDIT: Deleted link to my way old site, and combined the :hover and :active pseudo-classes in one declaration to comply with the "DRY" concept.
Nice explanation, easy to understand, thank you ronaldroe
 
Status
Not open for further replies.
Top