极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表翻转效果</title>
<style>
*{padding:0;margin:0;}
.nav{height:40px;width:400px;
background-color: #333;
margin:0 auto;
margin-top:50px;
}
.nav li{
height:40px;
width:120px;
background-color: #000;
margin-left:10px;
float:left;
position:relative;
color:snow;
line-height:40px;
text-align: center;
font-size:20px;
list-style:none;
}
.nav li ul{
position:absolute;
left:0;
top:40px;
}
.nav-2 li{
margin-left:0;
background-color: #000;
opacity:0;
transform:rotateY(180deg);
}
.nav>li:hover .nav-2 li{
opacity:1;
transform:none;
}
.nav li .nav-2 li{
transition:all 2s;
}
.nav li:hover .nav-2 li:nth-child(1){
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li:hover .nav-2 li:nth-child(2){
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.nav li:hover .nav-2 li:nth-child(3){
-webkit-transition-delay: 400ms;
-moz-transition-delay: 400ms;
-ms-transition-delay: 400ms;
-o-transition-delay: 400ms;
transition-delay: 400ms;
}
.nav li:hover .nav-2 li:nth-child(4){
-webkit-transition-delay: 600ms;
-moz-transition-delay: 600ms;
-ms-transition-delay: 600ms;
-o-transition-delay: 600ms;
transition-delay: 600ms;
}
.nav li:hover .nav-2 li:nth-child(5){
-webkit-transition-delay: 800ms;
-moz-transition-delay: 800ms;
-ms-transition-delay: 800ms;
-o-transition-delay: 800ms;
transition-delay: 800ms;
}
.nav li .nav-2 li:nth-child(5){
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
-ms-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
}
.nav li .nav-2 li:nth-child(4){
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.nav li .nav-2 li:nth-child(3){
-webkit-transition-delay: 400ms;
-moz-transition-delay: 400ms;
-ms-transition-delay: 400ms;
-o-transition-delay: 400ms;
transition-delay: 400ms;
}
.nav li .nav-2 li:nth-child(2){
-webkit-transition-delay: 600ms;
-moz-transition-delay: 600ms;
-ms-transition-delay: 600ms;
-o-transition-delay: 600ms;
transition-delay: 600ms;
}
.nav li .nav-2 li:nth-child(1){
-webkit-transition-delay: 800ms;
-moz-transition-delay: 800ms;
-ms-transition-delay: 800ms;
-o-transition-delay: 800ms;
transition-delay: 800ms;
}
div{
width:400px;
margin:0 auto;
border:solid;
box-sizing:border-box;
background-color: red;
font-size:18px;
}
</style>
</head>
<body>
<ul class="nav">
<li>菜单1
<ul class="nav-2">
<li>我是菜单2</li>
<li>我是菜单2</li>
<li>我是菜单2</li>
<li>我是菜单2</li>
<li>我是菜单2</li>
</ul>
</li>
<li>菜单1
<ul class="nav-2">
<li>我是菜单2</li>
<li>我是菜单2</li>
<li>我是菜单2</li>
<li>我是菜单2</li>
<li>我是菜单2</li>
</ul>
</li>
<li>菜单1
<ul class="nav-2">
<li>我是菜单2</li>
<li>我是菜单2</li>
<li>我是菜单2</li>
<li>我是菜单2</li>
<li>我是菜单2</li>
</ul>
</li>
</ul>
<div>很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大</div>
</body>
</html>为什么点击隐藏的二级菜单也会出现动画效果呢？我在css中只是设置了点击一级菜单的li才有效果呀？
html5
这种形式，命中的是.nav下所有子级li，不管你套几层，只要是在.nav子级的方向就会命中。
要达到你的目的，需要加“>”改成：
这样就只会命中.nav的直属子级，再往下就管不到了。
还有你
类似这种写法有点没必要，直接给li个类名不就得了？