基础 CSS 菜单嵌套样式

菜单是网页中常见的导航方式，而嵌套菜单则可以更加清晰地呈现网页内容的层次结构。在 CSS 中通过样式控制可以实现菜单的嵌套效果。

HTML 结构

首先，我们需要在 HTML 中定义菜单的结构。一个简单的菜单可能包含一个顶级菜单和若干个子菜单：

<nav>
  <ul class="top-level">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a>
      <ul class="sub-level">
        <li><a href="#">子菜单项1</a></li>
        <li><a href="#">子菜单项2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</nav>

其中，.top-level 表示顶级菜单，.sub-level 表示子菜单。

CSS 样式

接下来，我们需要定义菜单的 CSS 样式。首先，我们需要取消菜单默认的样式：

nav ul,
nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

然后，我们给顶级菜单和子菜单分别设置样式：

.top-level > li {
  display: inline-block;
  position: relative;
}

.sub-level {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.top-level > li:hover .sub-level {
  display: block;
}

其中，.top-level > li 表示顶级菜单中的菜单项，.sub-level 表示子菜单，.top-level > li:hover .sub-level 表示鼠标悬停在顶级菜单上时显示子菜单。

最后，我们设置菜单项的样式：

nav a {
  display: block;
  padding: .5em;
  color: #333;
  text-decoration: none;
}

nav a:hover {
  background-color: #eee;
}

这样，一个基本的 CSS 菜单嵌套样式就完成了。

结论

通过 CSS 样式，我们可以很容易地实现菜单的嵌套效果，让用户更加方便地浏览网页内容。

参考资料：

• CSS3 Navigation Bar with Submenu