下拉菜单，纯CSS实现

最新推荐文章于 2024-08-07 11:18:22 发布

CodeDoge

最新推荐文章于 2024-08-07 11:18:22 发布

阅读量134

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/codedoge/article/details/108342629

版权

下拉菜单，纯CSS实现

简单解释下：只需要设置一个div，然后给他设置两种状态，一种是没有:hover，一种是有:hover。并且在没有:hover的时候设置菜单隐藏就可以了（overflow: hidden;），其余的代码都是简单的盒子模型。

话不多说，直接上代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        li{
            list-style: none;
            height: 28px;
        }
        #menu{
            display: inline-block;
        }
        #menu #list {
            max-height: 0;
            transition: max-height 0.25s ease-out;
            overflow: hidden;
            background: #f5f4f4;
            width: 80px;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        #menu:

最低0.47元/天解锁文章

CodeDoge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单，纯CSS实现

下拉菜单，纯CSS实现简单解释下：只需要设置一个div，然后给他设置两种状态，一种是没有:hover，一种是有:hover。并且在没有:hover的时候设置菜单隐藏就可以了（overflow: hidden;），其余的代码都是简单的盒子模型。话不多说，直接上代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d
复制链接

扫一扫

专栏目录