css制作二级菜单

使用纯CSS制作二级菜单

通过CSS的:hover伪类和子元素选择器实现二级菜单的显示与隐藏。以下是一个典型的结构和样式示例：

HTML结构

<ul class="menu">
  <li>首页</li>
  <li>产品
    <ul class="submenu">
      <li>网页设计</li>
      <li>移动应用</li>
    </ul>
  </li>
  <li>服务
    <ul class="submenu">
      <li>咨询</li>
      <li>培训</li>
    </ul>
  </li>
</ul>

CSS样式

.menu {
  display: flex;
  list-style: none;
  background: #333;
  padding: 0;
}
.menu li {
  position: relative;
  padding: 15px 20px;
  color: white;
}
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  padding: 0;
  min-width: 150px;
}
.menu li:hover .submenu {
  display: block;
}
.submenu li {
  padding: 10px 20px;
  white-space: nowrap;
}

添加过渡动画效果

通过CSS过渡属性让二级菜单平滑出现：

.submenu {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
}
.menu li:hover .submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

响应式设计适配

针对移动设备添加媒体查询：

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
  .submenu {
    position: static;
    width: 100%;
  }
}

多级嵌套菜单实现

支持三级及以上菜单的嵌套结构：

.submenu .submenu {
  left: 100%;
  top: 0;
}

浏览器兼容性处理

添加针对旧版浏览器的备用方案：

.menu li {
  *display: inline-block; /* IE7 hack */
  zoom: 1; /* IE6/7 hasLayout触发 */
}

关键点说明：

• 使用position: relative和position: absolute建立定位上下文
• display: none初始隐藏二级菜单
• :hover伪类触发显示状态变化
• top: 100%确保二级菜单紧贴主菜单下方
• min-width防止内容过窄导致布局问题

通过调整z-index、box-shadow等属性可以进一步增强视觉效果：

.submenu {
  z-index: 100;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}