尝试使用HTML+CSS实现一个折叠菜单。鼠标悬停到菜单项上时,菜单将展开
时间: 2024-02-10 12:10:57 浏览: 32
好的,以下是一个简单的 HTML+CSS 实现折叠菜单的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>折叠菜单</title>
<style>
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
background-color: #eee;
padding: 10px;
margin-bottom: 5px;
cursor: pointer;
}
.menu li:hover {
background-color: #ccc;
}
.submenu {
display: none;
background-color: #fff;
padding: 10px;
margin-left: 20px;
}
.menu li:hover .submenu {
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>菜单项1
<ul class="submenu">
<li>子菜单项1</li>
<li>子菜单项2</li>
</ul>
</li>
<li>菜单项2
<ul class="submenu">
<li>子菜单项1</li>
<li>子菜单项2</li>
</ul>
</li>
<li>菜单项3
<ul class="submenu">
<li>子菜单项1</li>
<li>子菜单项2</li>
</ul>
</li>
</ul>
</body>
</html>
```
在这个示例中,我们使用了一个无序列表 `<ul>` 和列表项 `<li>` 来构建菜单。每个菜单项中都包含一个子菜单 `<ul>`,并使用 CSS 将子菜单隐藏起来。当鼠标悬停在菜单项上时,使用 CSS 将子菜单显示出来。
你可以将上述代码保存为一个 HTML 文件,并在浏览器中打开它,查看效果。希望这个示例能对你有所帮助。
相关推荐
![](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)
![](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)
![](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)
![](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)