简单的页面，当然是能不写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