html5+csss3问题 鼠标移到导航栏下面子分类显示了,怎么使它不显示,只...
发布网友
共2个回答
热心网友
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5动画飘窗导航</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: url("img/1.jpg") no-repeat;
background-size: cover;
}
nav {
width: 25%;
height: 45px;
margin: 150px auto 0px;
border-radius: 5px;
background: -webkit-linear-gradient(top, #fff, #999999);
}
nav > ul {
display: -webkit-box;
}
nav > ul > li {
list-style: none;
line-height: 45px; height: 45px; overflow: hidden;
text-align: center;
-webkit-box-flex: 1;
}
nav > ul > li > a {
text-decoration: none;
color: #000;
}
.sun_nav {
-webkit-perspective: 800px;
}
.sun_nav li {
list-style: none;
border: 1px solid #fff;
margin: 2px 0;
transform: rotateY(180deg);
transition: all .8s;
opacity: 0;
}
.sun_nav li a {
text-decoration: none;
color: #fff;
}
nav > ul > li:hover{
height: 400px;
}
nav > ul > li:hover .sun_nav li{
transform: rotateY(0deg);
opacity: 1;
}
nav > ul > li:hover .sun_nav li:nth-child(1) {
-webkit-transition-delay: 0ms;
}
nav > ul > li:hover .sun_nav li:nth-child(2) {
-webkit-transition-delay: 50ms;
}
nav > ul > li:hover .sun_nav li:nth-child(3) {
-webkit-transition-delay: 100ms;
}
nav > ul > li:hover .sun_nav li:nth-child(4) {
-webkit-transition-delay: 150ms;
}
</style>
</head>
<body style="background: #000000;">
<nav>
<ul>
<li id="aa"><a href="">产品展示</a>
<ul class="sun_nav">
<li><a href="">帮助中心</a></li>
<li><a href="">帮助中心</a></li>
<li><a href="">帮助中心</a></li>
<li><a href="">帮助中心</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
热心网友
设置a:hower
