css 动态的二级导航

1650873759719

一个简单的动态二级导航，主要实现功能，页面比较简陋，各位按照自己的需要加上背景颜色就可以了。

1、html部分

 <ul>
        <li>
            <a href="">首页</a>
            <div>
                <a href="">首页</a>
                <a href="">首页</a>
                <a href="">首页</a>
                <a href="">首页</a>
            </div>
        </li>
        <li>
            <a href="">首页</a>
            <div>
                <a href="">首页</a>
            </div>
        </li>
        <li>
            <a href="">首页</a>
            <div>
                <a href="">首页</a>
            </div>
        </li>
        <li>
            <a href="">首页</a>
            <div>
                <a href="">首页</a>
            </div>
        </li>
        <li>
            <a href="">首页</a>
            <div>
                <a href="">首页</a>
            </div>
        </li>
    </ul>

2、css部分

* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  border: 1px solid #000;
  display: block;
  padding: 10px 20px;
}
li {
  position: relative;
}
div {
  position: absolute;
}
div a {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s linear;
  transform: rotateY(90deg);
}
div a:nth-of-type(1) {
  transition-delay: 0;
}
div a:nth-of-type(2) {
  transition-delay: 50ms;
}
div a:nth-of-type(3) {
  transition-delay: 150ms;
}
div a:nth-of-type(4) {
  transition-delay: 200ms;
}
div a:nth-of-type(5) {
  transition-delay: 250ms;
}
li:hover div a {
  transform: rotateY(0);
  opacity: 1;
  visibility: visible;
}
ul {
  list-style: none;
  padding: 10px 0;
  display: flex;
  width: 50%;
  margin: 0 auto;
  justify-content: space-between;
}

3、完成