CSS3----导航条下拉效果

最新推荐文章于 2022-08-28 08:35:55 发布

AsaZyf

最新推荐文章于 2022-08-28 08:35:55 发布

阅读量454

点赞数

分类专栏：网页文章标签： CSS3 导航条导航条下拉

本文链接：https://blog.csdn.net/asazyf/article/details/83059644

版权

css3 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

网页

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>CSS3实现导航条下拉效果</title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           .nav {
               width: 500px;
               height: 40px;
               margin: 0 auto;
               display: flex;
           }

           .nav .item {
               width: 120px;
               height: 40px;
               line-height: 40px;
               text-align: center;
               background: #ddd;
               position: relative;
               margin-right: 5px;
           }

           .nav .item>a {
               display: block;
           }

           .nav .item>.list .item-list {
               background: #d3e9d3;
               height: 0;
               overflow: hidden;
               transition: 0.7s all;
           }

           .nav .item>.list .item-list a {
               display: block;
               text-decoration: none;
               color: #1befef;
           }

           .nav .item:hover .list .item-list {
               height: 40px;
           }
       </style>
   </head>