使用CSSHTML二级导航菜单

### 如何使用 CSS 和 HTML 实现二级导航菜单

#### 创建基本结构
为了构建一个简单的二级导航菜单，首先需要定义 HTML 结构。此结构通常由无序列表 `<ul>` 组成，其中每个顶级项是一个链接或另一个包含子项目的列表。

<nav>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">手机</a></li>
        <li><a href="#">平板电脑</a></li>
        <li><a href="#">笔记本电脑</a></li>
      </ul>
    </li>
    <li><a href="#">服务</a>
      <ul class="submenu">
        <li><a href="#">维修支持</a></li>
        <li><a href="#">客户咨询</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

#### 添加样式
接下来通过 CSS 来美化这个菜单并使其具有交互功能。这里的关键在于隐藏子菜单直到用户悬停在其父级项目上时才显示出来[^1]。

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

.menu > li {
  position: relative; /* 设置相对定位 */
  display: inline-block;
  margin-right: 2em;
}

.submenu {
  display: none; /* 默认情况下隐藏子菜单 */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  min-width: 160px;
  z-index: 1;
}

.submenu li {
  display: block !important;
}

.menu li:hover .submenu { 
  display: block; /* 当鼠标移到上面时显示子菜单 */
}

上述代码实现了当用户的光标悬浮在一个带有下拉选项的主条目之上时会显示出对应的次级菜单；而一旦移开，则自动收起这些额外的内容。

#### 增强用户体验 (可选)
如果希望进一步提升体验感，可以考虑加入一些过渡效果来让展开过程更加平滑自然：

/* 平滑过渡效果 */
.submenu {
  transition: all 0.3s ease-out;
  opacity: 0;
  transform: translateY(-10%);
}

.menu li:hover .submenu {
  opacity: 1;
  transform: translateY(0);
}

这样不仅视觉上更友好，在实际操作过程中也会显得更为流畅。