[分享]css下拉菜单 不依赖js

CSS下拉菜单是一种非常常见的网站功能。通过使用CSS和HTML，你可以创建一个不依赖于JavaScript的下拉菜单。首先，在HTML中，你需要创建一个包含下拉菜单选项的无序列表（）和一个包含该列表...

CSS下拉菜单是一种非常常见的网站功能。通过使用CSS和HTML，你可以创建一个不依赖于JavaScript的下拉菜单。

首先，在HTML中，你需要创建一个包含下拉菜单选项的无序列表（<ul>）和一个包含该列表的div容器，以便在CSS中选择它们。

<div class="dropdown">
  <ul>
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div> 

接下来，使用CSS以及一些伪类和伪元素选择器来创建下拉菜单。CSS样式如下：

/* 隐藏下拉菜单列表 */
.dropdown ul {
  display: none;
}

/* 当鼠标移到列表上方时，显示下拉菜单 */
.dropdown:hover ul {
  display: block;
  position: absolute;
  z-index: 1;
}

/* 美化下拉菜单选项 */
.dropdown ul li {
  background-color: #f2f2f2;
}

.dropdown ul li:hover {
  background-color: #ddd;
}

/* 清除默认样式 */
.dropdown a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 10px 15px;
} 

通过使用CSS，你可以轻松地创建并自定义你自己的CSS下拉菜单，而无需依赖JavaScript。与其他网站功能一样，你可以将下拉菜单与其他元素配对以使其更加多功能。