1 效果图
2 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<ul>
<li>
<a href="#">首页</a>
<ul class="subnav">
<li>
<a href="#">我</a>
</li>
<li>
<a href="#">你</a>
</li>
<li>
<a href="#">她</a>
</li>
<li>
<a href="#">他</a>
</li>
<li>
<a href="#">好</a>
</li>
<li>
<a href="#">吗</a>
</li>
</ul>
</li>
</nav>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style:none;
}
body {
background: #ccc;
}
/* 设置一级导航栏 */
nav {
width: 150px;
margin: 100px auto;
height: 50px;
position: relative;
background: #252525;
}
nav li:hover {
background: #fff;
}
nav>ul>li {
position: relative;
width: 150px;
height: 50px;
}
a {
width: 150px;
height: 50px;
line-height: 50px;
text-decoration: none;
display: block;
text-align: center;
color: red;
}
/* 二级导航栏开始 */
.subnav {
position: absolute;
top: 50px;
left: 0;
width: 150px;
perspective: 400px;
max-height: 0;
/* 设置视角及过渡时高度不超过 */
}
.subnav li {
background: #000;
opacity: 0;
transform: rotateY(90deg);
/* 初始时其Y轴是旋转90 */
transition: all .4s;
}
nav>ul>li:hover .subnav li {
transform: none;
/* 鼠标经过时Y轴恢复正常 */
opacity: 1;
}
/* 设置鼠标离开时的过渡效果,鼠标悬停时权重较高将其效果覆盖 */
.subnav li:nth-child(1){
transition-delay: 250ms;
background: #B820B8;
}
.subnav li:nth-child(2){
transition-delay: 200ms;
background: #2698A6;
}
.subnav li:nth-child(3){
transition-delay: 150ms;
background: #25A13D;
}
.subnav li:nth-child(4){
background: #E1861A;
transition-delay: 100ms;
}
.subnav li:nth-child(5){
background: #2698A6;
transition-delay: 50ms;
}
.subnav li:nth-child(6){
background: #2723DF;
transition-delay: 0ms;
}
/* 鼠标悬停时过渡效果 */
nav>ul>li:hover .subnav li:nth-child(1) {
transition-delay: 0s;
}
nav>ul>li:hover .subnav li:nth-child(2){
transition-delay: 50ms;
}
nav>ul>li:hover .subnav li:nth-child(3) {
transition-delay: 100ms;
}
nav>ul>li:hover .subnav li:nth-child(4) {
transition-delay: 150ms;
}
nav>ul>li:hover .subnav li:nth-child(5){
transition-delay: 200ms;
}
nav>ul>li:hover .subnav li:nth-child(6) {
transition-delay: 250ms;
}