CSS3 Dropdown Menu

Css
<style>

#menu a {
text-decoration:none;
color:#fff;
}

#menu ul {
margin:0;
padding:0;

}

#menu li {
list-style:none;
width:80px;
height:20px;
padding:3px 0 0 3px;
color:#fff;
text-align:left;
position:relative;
}

#menu {
position:absolute;
overflow:hidden;
height:22px;
width:80px;

-webkit-transition:height .2s ease;
-moz-transition:height .2s ease;

-border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .2);
box-shadow: 1px 1px 1px rgba(0,0,0, .2);

background: #888;
}

#menu:hover {
-webkit-transition:height .4s ease;
-moz-transition:height .4s ease;
height:90px;
}

</style>
Html
<ul id=menu>
<a href='#'><li>Menu</li></a>
<a href='#'><li>Html</li></a>
<a href='#'><li>CSS3</li></a>
<a href='#'><li>Mootools</li></a>
</ul>

Related Posts

CSS3 Animations Part1, CSS3 Body Background Gradient, CSS3 Gradient Button, CSS3 Box shadow, CSS3 Text shadow, CSS3 Gradient Background