为“认证考试”设置二级弹出式菜单,鼠标hover时显示。二级菜单有两个菜单项,分别是“PMP培训”和“红帽RHCE认证”,背景色白色,文字颜色黑色,鼠标移入二级菜单项时文字变为红色。
时间: 2023-12-26 13:04:25 浏览: 111
鼠标移到菜单上弹出二级菜单特效
可以使用HTML和CSS来实现这个二级弹出式菜单。具体做法如下:
1. 在HTML中,使用ul和li元素来构建菜单。其中,一级菜单使用class为menu-item的li元素,二级菜单使用class为submenu-item的li元素,并将二级菜单项放在一级菜单项的子元素ul中。
```html
<nav>
<ul>
<li class="menu-item">认证考试
<ul class="submenu">
<li class="submenu-item">PMP培训</li>
<li class="submenu-item">红帽RHCE认证</li>
</ul>
</li>
</ul>
</nav>
```
2. 在CSS中,为菜单项和二级菜单项添加样式。其中,一级菜单项设置position为relative,二级菜单项设置position为absolute,并且设置display为none。当一级菜单项被hover时,通过子元素选择器(>)选择二级菜单项,并将其display属性设置为block,实现弹出式菜单的效果。同时,通过hover选择器为二级菜单项设置背景色、文字颜色和鼠标悬停时的文字颜色。
```css
.menu-item {
position: relative;
}
.submenu {
position: absolute;
display: none;
background-color: white;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid black;
}
.menu-item:hover > .submenu {
display: block;
}
.submenu-item {
color: black;
background-color: white;
padding: 5px;
}
.submenu-item:hover {
color: red;
}
```
完成上述步骤后,当鼠标hover在“认证考试”菜单项上时,会弹出二级菜单,包含“PMP培训”和“红帽RHCE认证”两个菜单项。当鼠标移动到二级菜单项上时,文字颜色会变为红色。
阅读全文