面试官让我用纯css做一个下拉菜单，一分钟搞定！！

桃扇骨 2022-12-02 01:28 193阅读 0赞

导语：  
这几天看面试题目的时候，经常能够看到用css去实现一个下拉菜单，但是**我发现很多人却没能够做出来，最后只能勉强用js做出来**。实话实说，我很震惊，这个功能实现起来很简单，甚至可以说是入门题目，怎么这么多人不会呢？所以今天来个面试干货，带大家直接手撸css做下拉菜单。

**还是一样，话不多说，直接上效果图。**

1，一个按钮，没点击前（手机端）或者鼠标没指向时（pc端）

![在这里插入图片描述][20200829132110730.png_pic_center]  
2，点击后，或者鼠标指向后。

![手机点击后][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]  
![鼠标指向后][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]  
就能够显示下拉菜单，而且它的实现原理也很简单，只需要记住一点:hover，这个属性就行了。

我们直接上代码，稍后再来解释

<!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:hover #list { 
                max-height: 200px;
                transition: max-height 0.25s ease-in;
                width: 80px;
                margin: 0;
                padding: 0;
            }
            .button{ 
    	          height: 32px;
    	          width: 80px;
    	          margin-top: 6px;
    	          border-radius: 4px;
    	          color: #fff;
    	          padding-left: 0;
    	          padding-right: 0;
    	          line-height: 32px;
    	          background: #E33E33;
    	          text-align: center;
            }
        </style>
    </head>
    <body>
      <div id="menu">
        <div class="button">更多信息</div>
        <ul id="list">
            <li>个人中心</li>
            <li>我的博客</li>
            <li>设置</li>
            <li>退出登陆</li>
            <li>注销</li>
        </ul>
      </div>
    </body>
    </html>

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

现在再来说一说:hover，这个东西是什么，**它是一个css选择器，选择器用于选择鼠标指针浮动在上面的元素。** 所以说当鼠标悬浮或者手机端点击的时候，就会触发这个属性，就能够让这个下拉菜单显示出来了。同时我们加上了transition属性，让下拉菜单有渐变的效果，更加感觉时下拉下来的。

所以说css选择器是不是很神奇，用的好的话，就不用写一大坨js代码。我将会在后续把css选择器做成一个专栏，到时候在系统的介绍所有的css选择器。

![在这里插入图片描述][20200819195904573.png_pic_center]

**你们的赞就是对我最大的鼓励。谢谢~**

微信搜索【web小馆】，回复**全栈博客项目**，即可获取**项目源码和后续的实战文章教程**。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[20200829132110730.png_pic_center]: /images/20221123/689ee7cc14b44d859f5a172b3c00866f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a380b06a7eb247088fde0964179e447d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/93980fefdfcc43238e83c07a337ad2e0.png
[20200819195904573.png_pic_center]: /images/20221123/dc075c78ff0b4227a975ab3803ccc415.png
[20200825125805528.png_pic_center]: /images/20221123/97d3301ce5424fd787c1bc2effdab6a5.png
[node]: /images/20221123/b88fd3a054534343b1603a7b78a7fe61.png