html如何点击文字出现列表
时间: 2024-01-11 08:21:31 浏览: 27
你可以使用HTML和CSS来创建一个下拉列表。下面是一个简单的代码示例:
HTML代码:
```
<div class="dropdown">
<a href="#" class="dropdown-toggle">点击这里</a>
<ul class="dropdown-menu">
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
</ul>
</div>
```
CSS代码:
```
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-toggle {
color: #333;
text-decoration: none;
padding: 10px;
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
margin: 0;
list-style: none;
background-color: #fff;
border: 1px solid #ccc;
}
.dropdown-menu li {
padding: 5px;
}
.dropdown-menu li:hover {
background-color: #f0f0f0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
```
这段代码会创建一个下拉列表,当你点击“点击这里”时,下拉列表会展开显示选项一,选项二和选项三。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)