html5+csss3问题鼠标移到导航栏下面子分类显示了，怎么使它不显示，只有鼠标移到导航栏才显示

代码如下：<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>HTML5动画飘窗导航</titl... 代码如下：
<!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;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 .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>
<nav>
<ul>
<li><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>
鼠标移到导航栏下面子分类显示了，怎么使它不显示，只有鼠标移到导航栏才显示展开

 我来答

2个回答

#合辑# 机票是越早买越便宜吗？

百度网友8dda601
2015-09-15 · 超过15用户采纳过TA的回答

知道答主

回答量：21

采纳率：0%

帮助的人：23.9万

我也去答题访问个人页

关注

展开全部

<!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>

本回答由网友推荐

已赞过 已踩过<

评论收起

爽朗的小小333
2015-09-11 · 超过43用户采纳过TA的回答

知道答主

回答量：138

采纳率：66%

帮助的人：63万

我也去答题访问个人页

关注

展开全部

设置a:hower

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

html5+csss3问题 鼠标移到导航栏下面子分类显示了，怎么使它不显示，只有鼠标移到导航栏才显示

其他类似问题

为你推荐：

html5+csss3问题鼠标移到导航栏下面子分类显示了，怎么使它不显示，只有鼠标移到导航栏才显示