css实现点击下拉菜单 |css图片悬浮切换

代码：
html：
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">菜单一</a>
<a href="#">菜单二</a>
<a href="#">菜单三</a>
</div>
</div>
css：
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}

首先，在HTML中，大家将下拉菜单的容器设置为一个div元素，并为div元素添加一个class属性“dropdown”。在这个class下，大家有一个button元素，用于显示下拉菜单的标题，以及一个div元素，用于显示下拉菜单的内容，其中，大家为这个div元素添加了一个class属性“dropdown-content”，下面是这部分代码的具体实现。

.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}

首先，大家使用了position属性来设置这个容器的位置为相对定位，使得下拉菜单能够相对于它来进行定位。然后，大家设置button元素的样式，包括背景颜色、字体颜色、字体大小、边框等。大家还为下拉菜单的选项设置了样式，这些样式将应用于每一个菜单选项。最后，大家使用:hover选择器来设置当鼠标悬停在dropdown元素上时，dropdown-content元素将以块级元素显示。

以上就是使用CSS实现点击下拉菜单的全部内容，希望可以对大家有所帮助。