css实现下拉菜单

这次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>1li>
      <li>2li>
      <li>3li>
    ul>
  li>
  <li class="li">首页li>
  <li class="li">首页li>
  <li class="li">首页li>
ul>

实现的效果图如下：