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