在这个例子中，我们会看到一个纯css制作的下拉框。主要是要用到了html元素的checkbox 和css3选择器，并没有用到javascript。例子如下：
Click to Expand
实现过程：
<div class="dropdown"> <input type="checkbox" id="checkbox_toggle"> <label for="checkbox_toggle">Click to Expand</label> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> </ul></div>
#div作为一个容器包裹所有标签
立即学习“前端免费学习笔记（深入）”；
#input[type=checked]标签用于标识checked 和unchecked 属性，元素是隐藏的
#label标签用于触发下拉菜单
#ul为菜单列表
我们只需要checkbox元素的伪类选择器:checked就可以检测到元素的checked状态，通过label标签来触发checkbox的unchecked 和checked 状态。首先把checkbox隐藏
input[type=checkbox]{ display: none;}同时，我们也把ul默认隐藏掉，当触发菜单时才会显示。
ul{ display: none;}通过结合:checked选择器 和相邻同胞选择器~ 来控制对应的菜单的显示状态。
input[type=checkbox]:checked ~ ul { display: block}当checkbox为选中状态时，下拉菜单就显示，否则隐藏。
demo:
demo.zip
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
910
