要制作二级菜单样式,可以使用CSS中的伪类和选择器来实现。首先,在一级菜单的HTML标记中,为二级菜单添加一个子元素,例如<ul>
,并用CSS设置其display
属性为none
,以便在鼠标悬停或点击时将其显示出来。然后,使用CSS中的:hover
伪类来控制鼠标悬停时的样式,使用子选择器>
来选择二级菜单的样式。
例如,假设一级菜单的HTML标记为<ul>
,其中包含多个菜单项,每个菜单项都包含一个二级菜单的<ul>
标记,那么可以使用以下CSS样式来设置二级菜单的样式:
ul li ul {
display: none;
}
ul li:hover > ul {
display: block;
position: absolute;
top: 100%;
left: 0;
}
ul li ul li {
display: block;
width: 100%;
}
ul li ul li a {
display: block;
padding: 5px 10px;
color: #333;
text-decoration: none;
}
ul li ul li:hover a {
background-color: #eee;
color: #000;
}
在这个例子中,ul li ul
选择器选择所有二级菜单的<ul>
标记,并将其显示属性设置为none
。ul li:hover > ul
选择器选择在一级菜单上悬停时显示的二级菜单的<ul>
标记,并将其显示属性设置为block
,以便其显示在一级菜单下方。ul li ul li
选择器选择所有二级菜单的菜单项,并将其显示属性设置为block
,以便它们在垂直布局中正确显示。ul li ul li a
选择器选择所有二级菜单的链接,并设置它们的样式,例如字体大小和颜色。ul li ul li:hover a
选择器选择在鼠标悬停在二级菜单上时链接的样式,并设置其背景颜色和字体颜色。
关键词:CSS、二级菜单、伪类、选择器、display、:hover、子选择器、position、top、left、background-color、color。