html二级菜单显示与隐藏,悬浮显示隐藏二级菜单与小三角制作
时间: 2023-08-18 13:07:00 浏览: 59
要实现HTML二级菜单的显示与隐藏,可以使用CSS中的伪类:hover。具体的实现方法如下:
1. HTML代码中,先定义一级菜单和二级菜单。
```
<ul>
<li><a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
```
2. CSS代码中,设置二级菜单的初始状态为不可见,鼠标悬浮在一级菜单上时,显示对应的二级菜单。
```
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
```
3. 为了美观,可以在一级菜单后面添加一个小三角,表示有下级菜单。这可以使用CSS的border属性来实现。
```
ul li {
position: relative;
}
ul li > a:after {
content: "";
border: 5px solid transparent;
border-top-color: #000;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
```
这样就可以实现一个简单的HTML二级菜单,并且在悬浮时能够显示对应的二级菜单和小三角。