如何利用transform实现一个纯CSS弹出菜单

这篇“如何利用transform实现一个纯CSS弹出菜单”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“如何利用transform实现一个纯CSS弹出菜单”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。

创新互联主营聊城网站建设的网络公司,主营网站建设方案,APP应用开发,聊城h5小程序定制开发搭建,聊城网站营销推广欢迎聊城等地区企业咨询

先上效果

制作方法

核心就是利用了transform的区域位移方法，在配合上li标签的hover伪类和动画延时，从而简单实现了子菜单的显示

 *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  nav{
    margin: 10px;
  }
  nav ul {
    list-style-type: none;
    height: 32px;
    display: flex;
  }
  nav ul li{
    margin-right: 10px;
  }
  nav ul li strong{
    text-transform: uppercase;
    background-color: #9b59b6;
    color: white;
    padding: 5px 30px;
    line-height: 30px;
    cursor: pointer;
  }
  nav ul li strong+div{
    display: flex;
    flex-direction: column;
    background-color: #3498db;
    padding: 10px;
    transform: translateY(-110%);
    opacity: 0;
    transition: .3s;
    transform-origin: top;
  }
  nav ul li:hover div{
    transform: translateY(0);
    opacity: 1;
  }
  nav ul li strong+div a{
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px 0;
  }

感谢你的阅读，希望你对“如何利用transform实现一个纯CSS弹出菜单”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注创新互联行业资讯频道！