Menu with CSS3 Transitions

CSS for this menu –


<style>
.accordion div
{
background-color:#9CF;
width:100px;
float:left;
-webkit-transition: width 1s ease;
-moz-transition:width 1s ease;
font-family:Georgia, "Times New Roman", Times, serif;
overflow:hidden;
height:50px;

}
.accordion p:first-child
{
padding:10px;
margin:10px;
}

.accordion div:hover
{
width:300px;
background-color:#09F;
height:373px;
border:#FFF;
}
.textstyle{
padding:5px;
color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
</style>

Click on the Image to see the Live Example. The animation part will only work on browsers which support CSS3 transitions – Chrome,Safari,Opera.Currently not working on Mozilla.