Sav2907,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
}
#button {
position: fixed;
top: 0px;
left: 0px;
background: #ff7700;
width: 70px;
height: 70px;
font: 40px Georgia;
color: #fff;
text-align: center;
border-radius: 0 5px 5px 0;
background-image: url(http://www.qwa7.net/images/user_upload/homepage.png);
background-repeat: no-repeat;
background-position: center;
transition: width .6s linear .9s, height .8s linear .3s;
}
#button:hover{
transition: width .3s linear, height .2s linear .3s;
width: 180px;
height: 220px;
}
#button:hover .item{
left: 0px;
}
.item{
position: relative;
top: 0px;
left: -150px;
background: #ff7700;
width: 150px;
height: 60px;
padding: 10px 0 0 0;
transition: left .2s linear;
}
#test0 {
transition-delay: .4s;
}
#test1 {
transition-delay: .2s;
}
#test2 {
transition-delay: 0s;
}
#button:hover #test0 {
transition-delay: 0s;
}
#button:hover #test1 {
transition-delay: .2s;
}
#button:hover #test2 {
transition-delay: .4s;
}
</style>
</head>
<body>
<div id="button">
<div id="test0" class="item">
<a href="">Test0</a>
</div>
<div id="test1" class="item">
<a href="">Test1</a>
</div>
<div id="test2" class="item">
<a href="">Test2</a>
</div>
</div>
</body>
</html>
