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

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

先上效果

制作方法

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

<nav>  <ul>    <li>      <strong>home</strong>      <div>        <a href="">cms</a>        <a href="">crm</a>      </div>    </li>    <li>      <strong>live</strong>      <div>        <a href="">java</a>        <a href="">php</a>      </div>    </li>    <li>      <strong>pictrue</strong>      <div>        <a href="">mm</a>        <a href="">dd</a>      </div>    </li>  </ul></nav>

 *{    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弹出菜单”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注编程网行业资讯频道！