这次css实现下拉菜单是仿照小米官网的一个小效果，如下：
css实现下拉菜单，主要用到的知识点有用到伪元素来实现小箭头的点缀，还有transition属性实现下拉菜单过渡出现，不是直接崩出来的那种，提高用户体验

可以看到这个二维码出来的时候还有个小尖尖，所以先上代码说明小尖尖的实现，如下：

<p class="home">首页</p><style>.home{width:200px;height:50px;background:#ccc;text-align: center;line-height: 50px;position: relative;}/* 伪元素brfore*/.home::before{content: ""; /*只要是使用伪元素，就必须和content一起使用，里面可以接文字*/border:20px solid;border-color:red green blue skyblue;position: absolute;left:0;top:50%;margin-top:-20px;}</style>

上述写完后，可以得到一个带四个颜色的块块，灰**域是个p如下：
图中现在有四个颜色的小尖尖，如果不想要哪个的话，只需要把颜色改成transparent就行，可以看到颜色的顺序是也上、右、下和左。

有了以上的铺垫后，就可以接着往下了，下拉菜单想要有过渡效果主要是用到transition属性，另外还有最大高度，代码如下：

<style>ul,li{margin:0;padding:0;}.ulbox{width:400px;height: 40px;}.ulbox .li{list-style: none;float: left;width:100px;max-height: 40px;background: orange;text-align: center;line-height: 40px;overflow: hidden;transition: max-height 0.5s;}/*这里设置最大高度，就不会有溢出，然后就可以看到*/.ulbox .li:hover {max-height: 200px;}/*控制小尖尖的显示*/.ulbox .li:hover .abox::before{display: block;}.dropdown{width:100px;}.dropdown li{list-style-type: none;background:red;}.abox{position: relative;display: block;width:100%;height: 100%;}.abox::before{content: "";border:10px solid;border-color:transparent transparent red transparent;position: absolute;bottom:0;left:50%;margin-left:-10px;display: none;}</style><ul class="ulbox"><li class="libox li"><a href="javascript:;" class="abox" >首页</a><ul class="dropdown"><li>1</li><li>2</li><li>3</li></ul></li><li class="li">首页</li><li class="li">首页</li><li class="li">首页</li></ul>

实现的效果图如下：