不用bootstrap，几行css制作下拉菜单

简单的页面，当然是能不写js，就不写js

纯css方法第一种~利用input的checked

先看html

<div class="drop-list">
<label for="status-toggle">情况</label>  
<input name="option1" type="checkbox" id="status-toggle"/>  
   <ul class="drop-menu status-menu">  
    <li><a href="#">First link</a></li>
    <li><a href="#">Second link</a></li>
    <li><a href="#">Third link</a></li>
  </ul> 
  <span class="caret"></span>
</div>```

label要写一个for对应input的id,同时css将checkbox隐藏
可以给label一个 `cursor:pointer;` 效果更好
核心css思想，利用checked 然后 + ul来进行显示(+是选择兄弟元素）
经过实验，发现也可以写height,opacity等配合transtion 动画效果
```css
input[type="checkbox" i]{
    display: none;
}
input[type="checkbox" i]:checked + ul {
    display: block;
}

这种方法有一个缺点，就是可以同时打开多个菜单
并且必须点击label才能关闭，因为这是checkbox的性质

纯css方法第二种~利用:focus和poiont

先看html

<div class="drop-list" tabindex="0">所在地
<ul class="drop-list-content">  
  <li>First link</li>
  <li><a href="http://www.baidu.com">Second link</a></li>
  <li><a href="http://www.baidu.com">Third link</a></li>
</ul>
<span class="caret"></span>
</div>```
划重点了~~~一定要写tabindex
这个focus属性，本来是配合键盘tab使用的
现在拿来用一下，没发现什么不妥

然后我们看css，因为在用less，就直接复制过来了。
```css 
.drop-list {
    cursor: pointer;
    &:focus {
       pointer-events: none;
      outline: none;
    }
    &:focus .drop-list-content {
      display: block;
      pointer-events: auto;
    }
    .drop-list-content {
      display: none;
      position: absolute;
    }
}```
继续划重点，这里有一个新属性，pointer-evnents。
是用来取消一个链接的点击跳转功能，具体展开各位可以移步张鑫旭大神的文章。

>当focus时，a，button是无法被打开的的？具体原理尚未研究，不给a设置，也可以给li标签设置onclick行为open网页。
>另外，同样可以把display改成visiblity，也是另一种方法。

###纯css方法第三种，利用:target伪类
有待尝试，未完待续

需求来源于IT修真院的CSS任务
这是我的邀请链接http://www.jnshu.com/login/1/95597606