<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style type="text/css">
ul{
width: 800px;
height: 40px;
line-height: 40px;
background-color: #CCCCCC;
border: 1px solid #CCCCCC;
border-radius: 10px;
margin:50px auto;
padding-left: 20px;
color: white;
box-shadow: 2px 2px 1px 1px #EFEFEF;
}
li{
float: left;
list-style:none;
position: relative;
width:100px;
text-align: center;
margin-left: 30px;
}
li div{
width: 200px;
background: #333333;
padding: 10px;
padding-left: 0px;
position: absolute;
left: 0px;
top:40px;
display: none;
animation: aa 1s linear 1;
}
div a{
font-size: 12px;
display: block;
float: left;
margin-left: 15px;
margin-right: 15px;
color: white;
text-decoration: none;
}
li:hover{
background: #333333;
}
li:hover div{
display: block;
}
@keyframes aa{
0%{transform: rotateX(0deg) rotateY(0deg);opacity:0.9;}
30%{transform: rotateX(-20deg) rotateY(5deg);animation-timing-function: ease-in-out;}
60%{transform: rotateX(20deg) rotateY(-5deg);animation-timing-function: ease-in-out;}
100%{transform: rotateX(0deg) rotateY(0deg);animation-timing-function: ease-in-out;}
}
</style>
</head>
<body>
<ul>
<li>
主菜单一
<div>
<a href="#">子菜单1-1</a>
<a href="#">子菜单1-2</a>
<a href="#">子菜单1-3</a>
</div>
</li>
<li>
主菜单二
<div>
<a href="#">子菜单2-1</a>
<a href="#">子菜单2-2</a>
<a href="#">子菜单2-3</a>
<a href="#">子菜单2-4</a>
<a href="#">子菜单2-5</a>
<a href="#">子菜单2-6</a>
</div>
</li>
<li>
主菜单三
<div>
<a href="#">子菜单3-1</a>
<a href="#">子菜单3-2</a>
<a href="#">子菜单3-3</a>
<a href="#">子菜单3-4</a>
</div>
</li>
<li>
主菜单四
<div>
<a href="#">子菜单4-1</a>
<a href="#">子菜单4-2</a>
<a href="#">子菜单4-3</a>
<a href="#">子菜单4-4</a>
<a href="#">子菜单4-5</a>
</div>
</li>
<div style="clear: both;"></div>
</ul>
</body>
</html>
css3(十)练习导航栏
最新推荐文章于 2021-12-29 14:01:06 发布