CSS3动画制作下拉导航
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作3D旋转导航</title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
.clearfix{zoom:1;}
.clearfix:after{content:'\20';display:block;height:0;clear:both;}
.nav{
width:950px;
margin:50px auto 0;
background:#74ADAA;
}
.nav >li{
float:left;
position:relative;
}
.nav li a{
display:block;
padding:15px 30px;
color:#fff;
line-height:20px;
font-size:20px;
border-right:1px solid #fff;
text-decoration:none;
text-transform:capitalize;
}
.nav li:last-child a{
border-right:0;
}
.contact{
position:absolute;
top:50px;
left:0;
color:#fff;
width:200px;
background:#74ADAA;
transform-origin: 0px 0px;
transform:rotatex(-90deg);
transition:all 0.3s ease-in;
}
.nav li:hover .contact{
transform:rotatex(0deg);
}
.contact li{position:relative;}
.contact li .cot2 {
position:absolute;
left:200px;
top:0;
background:#f00;
width:200px;
transform:rotatex(-90deg);
transition:all .3s ease;
transform-origin:0 0;
}
.contact li:hover .cot2{
transform:rotatex(0deg);
}
</style>
</head>
<body>
<ul class="nav clearfix">
<li><a href="#">home</a></li>
<li><a href="#">html5</a></li>
<li>
<a href="#">css3</a>
<ul class="contact">
<li>
<a href="#">list1</a>
</li>
<li>
<a href="#">list2</a>
<ul class="cot2">
<li>
<a href="#">list2</a>
</li>
<li>
<a href="#">list2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
