使用当前CSS添加下拉菜单可以通过以下步骤实现:
<ul>
和<li>
标签创建一个无序列表,其中每个列表项代表一个菜单选项。在需要下拉菜单的列表项中,再嵌套一个<ul>
标签,用于创建下拉菜单的选项。<ul class="menu">
<li><a href="#">菜单项1</a></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>
<li><a href="#">菜单项3</a></li>
</ul>
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.menu li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 0;
}
.menu li:hover ul {
display: block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 10px;
color: #333;
text-decoration: none;
}
.menu li ul li a:hover {
background-color: #f0f0f0;
}
<ul>
标签。<link rel="stylesheet" href="styles.css">
<ul class="menu">
<li><a href="#">菜单项1</a></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>
<li><a href="#">菜单项3</a></li>
</ul>
通过以上步骤,就可以使用当前CSS添加下拉菜单。当鼠标悬停在菜单项2上时,会显示一个下拉菜单,其中包含下拉菜单项1、下拉菜单项2和下拉菜单项3。用户可以点击菜单项和下拉菜单项进行相应的操作。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云