嵌套列表下拉菜单HTML和CSS

嵌套列表下拉菜单是一种常见的网页导航菜单形式，通过HTML和CSS实现。它通常由一个主菜单和若干子菜单组成，当鼠标悬停或点击主菜单时，对应的子菜单会展开或收起。

HTML部分：

<ul class="menu">
  <li>
    <a href="#">主菜单1</a>
    <ul class="submenu">
      <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 class="submenu">
      <li><a href="#">子菜单4</a></li>
      <li><a href="#">子菜单5</a></li>
    </ul>
  </li>
  <li><a href="#">主菜单3</a></li>
</ul>

CSS部分：

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  position: relative;
}

.menu a {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
}

.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 0;
  margin: 0;
}

.menu li:hover .submenu {
  display: block;
}

.menu .submenu li {
  width: 200px;
}

.menu .submenu a {
  background-color: #fff;
  color: #333;
}

.menu .submenu a:hover {
  background-color: #f0f0f0;
}

以上代码实现了一个简单的嵌套列表下拉菜单。主菜单使用<ul>和<li>标签表示，子菜单使用嵌套的<ul>和<li>标签表示。通过CSS设置菜单的样式，其中.submenu类控制子菜单的显示和隐藏。

这种嵌套列表下拉菜单适用于网站的导航菜单，可以提供清晰的导航结构，使用户能够方便地浏览和访问网站的各个页面。

腾讯云提供的相关产品和产品介绍链接地址如下：