html+css树形菜单案例
时间: 2024-09-20 13:03:46 浏览: 28
JS+CSS实现TreeMenu二级树形菜单完整实例
HTML和CSS可以结合创建出美观且交互性强的树状菜单,通常用于网站的导航结构。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
position: relative;
cursor: pointer;
}
li a {
display: block;
color: black;
padding: 16px 16px;
}
li a:hover {
background-color: #f1f1f1;
}
/* 添加下拉菜单 */
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">根节点</a>
<ul>
<li><a href="#">子节点1</a></li>
<li><a href="#">子节点2</a></li>
<li>
<a href="#">子节点3</a>
<ul>
<li><a href="#">孙子节点1</a></li>
<li><a href="#">孙子节点2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
```
在这个例子中,`<ul>`标签表示无序列表,`<li>`标签定义了每一级菜单项,内部嵌套的另一个`<ul>`表示下一级菜单。当鼠标悬停在父菜单项上时,其对应的下拉菜单会显示出来。
阅读全文