css下拉级联菜单

温馨提示：这篇文章已超过142天没有更新，请注意相关的内容是否还可用！

css下拉级联菜单

CSS下拉级联菜单是一种常见的网页导航菜单样式，它可以让用户通过鼠标悬停或点击菜单项，展开或收起子菜单。这种菜单通常由一个主菜单和若干个子菜单组成，子菜单在主菜单的下方或右侧以垂直或水平的方式展开。

下面是一个简单的CSS下拉级联菜单的示例代码：


<!DOCTYPE html>
<html>
<head>
<style>
/* 设置菜单样式 */
ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}
/* 设置主菜单项样式 */
ul.menu li {
  position: relative;
  cursor: pointer;
}
/* 设置子菜单样式 */
ul.menu ul {
  display: none; /* 默认隐藏子菜单 */
  position: absolute;
  top: 0;
  left: 100%;
  width: 200px;
  background-color: #ddd;
}
/* 鼠标悬停或点击主菜单项时显示子菜单 */
ul.menu li:hover ul,
ul.menu li:focus-within ul {
  display: block;
}
/* 设置菜单项样式 */
ul.menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}
/* 设置子菜单项样式 */
ul.menu ul li {
  border-bottom: 1px solid #ccc;
}
/* 设置最后一个子菜单项样式 */
ul.menu ul li:last-child {
  border-bottom: none;
}
</style>
</head>
<body>
<ul class="9669-d82e-7e83-6e9d menu">
  <li>
    <a href="#">主菜单1</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="#">主菜单2</a>
    <ul>
      <li><a href="#">子菜单4</a></li>
      <li><a href="#">子菜单5</a></li>
      <li><a href="#">子菜单6</a></li>
    </ul>
  </li>
  <li>
    <a href="#">主菜单3</a>
    <ul>
      <li><a href="#">子菜单7</a></li>
      <li><a href="#">子菜单8</a></li>
      <li><a href="#">子菜单9</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

在上面的示例代码中，我们首先创建了一个无序列表（ul）作为菜单的容器，并为其添加了一个类名为"menu"的样式。然后，每个主菜单项都是一个列表项（li），主菜单项中包含一个链接（a）作为菜单的文本内容。

接下来，我们为主菜单项设置了一个相对定位（position: relative），以便子菜单可以相对于主菜单项进行绝对定位。子菜单是通过一个嵌套的无序列表（ul）来实现的，并且默认是隐藏的（display: none）。

当鼠标悬停或点击主菜单项时，我们使用:hover伪类和:focus-within伪类来显示子菜单（display: block）。这样，当用户与主菜单项进行交互时，子菜单就会展开。

我们还设置了一些其他的样式，如菜单的背景颜色、菜单项的边框样式等，以增强菜单的外观和可读性。

通过以上的示例代码，我们可以实现一个简单的CSS下拉级联菜单。你可以根据自己的需求，进一步扩展和定制菜单的样式和功能，例如添加动画效果、调整菜单的布局等。还可以结合JavaScript等技术，实现更复杂的交互效果，如菜单的动态加载、搜索功能等。

css下拉级联菜单

相关阅读