HTML5 div+css导航菜单

HTML5 div+css导航菜单

#m1 {
background-color: #FF9900;
float: left;
height: 100px;
width: 200px;
margin-top: 100px;
margin-left: 100px;
position: relative;
transition:width 0.5s;
}
#m1:hover{
width: 280px;
}
#m2:hover{
width: 280px;
}
#m3:hover{
width: 280px;
}
#m4:hover{
width: 280px;
}
#m5:hover{
width: 280px;
}
#m6:hover{
width: 280px;
}
#m7:hover{
width: 280px;
}

#m2 {
background-color: #6699CC;
float: left;
height: 100px;
width: 200px;
margin-top: 100px;
margin-left: 0px;
position: relative;
transition:width 0.5s;
}
#m3 {
background-color: #999900;
float: left;
height: 100px;
width: 200px;
margin-top: 100px;
margin-left: 0px;
position: relative;
transition:width 0.5s;
}
#m4 {
background-color: #0099CC;
float: left;
height: 100px;
width: 200px;
margin-top: 0px;
margin-left: 100px;
position: relative;
transition:width 0.5s;
}
#m5 {
background-color: #CC6666;
float: left;
height: 100px;
width: 200px;
margin-top: 0px;
margin-left: 0px;
position: relative;
transition:width 0.5s;
}
.clear {
clear: left;
}
#m6 {
background-color: #996699;
float: left;
height: 100px;
width: 200px;
margin-top: 0px;
margin-left: 0px;
position: relative;
transition:width 0.5s;
}
#m7 {
background-color: #9966CC;
float: left;
height: 100px;
width: 200px;
margin-top: 0px;
margin-left: 0px;
position: relative;
transition:width 0.5s;
}
.zt {
font-size: 3em;
font-weight: 800;
color: #FFFFFF;
line-height: 100px;
text-align: center;
vertical-align: middle;
}