html+css三级下拉
时间: 2023-10-17 18:05:42 浏览: 64
三级下拉菜单可以通过HTML和CSS结合实现。下面是一个简单的例子:
HTML代码:
```
<ul class="menu">
<li><a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a>
<ul>
<li><a href="#">三级菜单1</a></li>
<li><a href="#">三级菜单2</a></li>
</ul>
</li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a></li>
<li><a href="#">一级菜单3</a></li>
</ul>
```
CSS代码:
```
.menu {
list-style:none;
margin:0;
padding:0;
}
.menu li {
position:relative;
float:left;
padding:0;
margin:0;
}
.menu li a {
display:block;
padding:0 10px;
line-height:20px;
height:20px;
text-decoration:none;
color:#333;
border:1px solid #ccc;
border-bottom:none;
}
.menu li ul {
display:none;
position:absolute;
top:20px;
left:0;
margin:0;
padding:0;
background:#fff;
border:1px solid #ccc;
border-top:none;
}
.menu li:hover > ul {
display:block;
}
.menu li ul li {
float:none;
display:block;
padding:0;
margin:0;
border-bottom:1px solid #ccc;
}
.menu li ul li ul {
top:0;
left:100%;
}
```
解释:
1. HTML中使用了无序列表(ul)和列表项(li)来实现菜单结构。
2. 通过CSS设置菜单的样式,包括列表样式、边距、内边距、字体颜色、边框等。
3. 通过CSS设置子菜单的样式,包括显示位置、背景颜色、边框等。
4. 通过CSS设置鼠标悬停时子菜单的显示方式。
注意:
1. 本例中只实现了三级菜单,如果需要更多级别的菜单,可以根据类似的方式进行扩展。
2. 本例中使用了CSS选择器“>”来选择直接子元素,这是为了避免子菜单的样式对其他元素产生影响。
阅读全文