1.通过hover，也是最常用的方式。此方法要求按钮与被控制元素必须有层级关系。（兼容低端浏览器常用）
???<div class="nav-btn"> ???????<h2>按钮</h2> ???????<ul class="nav-box"> ???????????<li><a href="#">菜单1</a></li> ???????????<li><a href="#">菜单2</a></li> ???????????<li><a href="#">菜单3</a></li> ???????</ul> ???</div>
???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????ul,li{ ???????????list-style: none; ???????} ???????.nav-btn{ ???????????position: relative; ???????} ???????.nav-btn h2{ ???????????height: 60px; ???????????line-height: 60px; ???????????width: 130px; ???????????text-align:center; ???????????background: #ff0; ???????} ???????.nav-box{ ???????????position: absolute; ???????????top:60px; ???????????left: 0px; ???????????display: none; ???????} ???????.nav-btn:hover .nav-box{ ???????????display: block; ???????}2.通过：focus点击按钮显示，点击空白处隐藏。此方通同样需要按钮与被控制元素之间存在层级关系。（需用到CSS3选择器）
???<div class="nav-btn"> ???????<button>按钮</button> ???????<ul class="nav-box"> ???????????<li><a href="#">菜单1</a></li> ???????????<li><a href="#">菜单2</a></li> ???????????<li><a href="#">菜单3</a></li> ???????</ul> ???</div>
???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????ul,li{ ???????????list-style: none; ???????} ???????.nav-btn{ ???????????position: relative; ???????} ???????.nav-btn h2{ ???????????height: 60px; ???????????line-height: 60px; ???????????width: 130px; ???????????text-align:center; ???????????background: #ff0; ???????} ???????.nav-box{ ???????????position: absolute; ???????????top:60px; ???????????left: 0px; ???????????display: none; ???????} ???????.nav-btn button:focus ~ .nav-box{ ???????????display: block; ???????}3.利用label的for属性绑定checkbox，此方法对按钮与盒子的层级关系没有限制（需用到CSS3选择器）
???<label for="control" class="nav-btn">菜单</label> ???<div> ???????<input type="checkbox" name="" id="control" class="nav-con"> ???????<ul class="nav-box"> ???????????<li><a href="#">首页</a></li> ???????????<li><a href="#">联系我们</a></li> ???????????<li><a href="#">产品</a></li> ???????????<li><a href="#">新闻</a></li> ???????</ul> ???</div>
???????ul,li{ ???????????list-style: none; ???????} ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????.nav-con{ ???????????display: none; ???????} ???????.nav-box{ ???????????display: none; ???????} ???????.nav-con:checked ~ .nav-box{ ??????????display: block; ???????} ???????.nav-btn{ ???????????padding: 10px 15px; ???????????background:; ???????}3种纯css方法控制元素隐藏显示
原文地址：http://www.cnblogs.com/pomelott/p/7435677.html