这次css实现下拉菜单是仿照小米官网的一个小效果，如下：
css实现下拉菜单，主要用到的知识点有用到伪元素来实现小箭头的点缀，还有transition属性实现下拉菜单过渡出现，不是直接崩出来的那种，提高用户体验
可以看到这个二维码出来的时候还有个小尖尖，所以先上代码说明小尖尖的实现，如下：
<div class="home">首页</div>
<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>
上述写完后，可以得到一个带四个颜色的块块，灰色区域是个div如下：
图中现在有四个颜色的小尖尖，如果不想要哪个的话，只需要把颜色改成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>
实现的效果图如下：
