二级菜单是网页导航中常见的交互组件，纯css实现二级菜单的核心思路是通过父元素hover状态控制子元素的显示隐藏，结合不同的布局方式可以实现水平或垂直形态的菜单。下面分别介绍两种常见布局的实现方法。
一、水平二级菜单实现
1. HTML结构搭建
水平菜单的一级菜单横向排列，二级菜单默认隐藏，鼠标悬停一级菜单项时显示对应的二级菜单。结构如下：
<nav class="hor-menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#">首页</a>
</li>
<li class="menu-item">
<a href="#">产品中心</a>
<ul class="sub-menu">
<li><a href="#">产品A</a></li>
<li><a href="#">产品B</a></li>
<li><a href="#">产品C</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#">关于我们</a>
<ul class="sub-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</li>
</ul>
</nav>2. CSS样式编写
核心样式需要设置一级菜单横向排列，二级菜单绝对定位隐藏，鼠标悬停父元素时显示二级菜单：
/* 清除默认样式 */
.hor-menu ul, .hor-menu li {
margin: 0;
padding: 0;
list-style: none;
}
/* 一级菜单横向排列 */
.hor-menu .menu-list {
display: flex;
}
.hor-menu .menu-item {
position: relative; /* 为二级菜单定位提供参考 */
width: 120px;
text-align: center;
}
.hor-menu .menu-item > a {
display: block;
padding: 12px 0;
background-color: #333;
color: #fff;
text-decoration: none;
}
/* 二级菜单默认隐藏 */
.hor-menu .sub-menu {
position: absolute;
left: 0;
top: 100%;
width: 120px;
display: none; /* 隐藏二级菜单 */
background-color: #666;
}
.hor-menu .sub-menu li a {
display: block;
padding: 10px 0;
color: #fff;
text-decoration: none;
}
/* 鼠标悬停一级菜单项时显示二级菜单 */
.hor-menu .menu-item:hover .sub-menu {
display: block;
}
/* 交互反馈样式 */
.hor-menu .menu-item > a:hover {
background-color: #555;
}
.hor-menu .sub-menu li a:hover {
background-color: #888;
}二、垂直二级菜单实现
1. HTML结构搭建
垂直菜单的一级菜单纵向排列，二级菜单默认隐藏，鼠标悬停时向右展开显示：
<nav class="ver-menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#">首页</a>
</li>
<li class="menu-item">
<a href="#">产品中心</a>
<ul class="sub-menu">
<li><a href="#">产品A</a></li>
<li><a href="#">产品B</a></li>
<li><a href="#">产品C</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#">关于我们</a>
<ul class="sub-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</li>
</ul>
</nav>2. CSS样式编写
垂直菜单的一级菜单纵向排列，二级菜单定位在一级菜单右侧，同样通过hover控制显示：
/* 清除默认样式 */
.ver-menu ul, .ver-menu li {
margin: 0;
padding: 0;
list-style: none;
}
/* 一级菜单纵向排列 */
.ver-menu .menu-list {
width: 150px;
}
.ver-menu .menu-item {
position: relative; /* 为二级菜单定位提供参考 */
}
.ver-menu .menu-item > a {
display: block;
padding: 12px 15px;
background-color: #333;
color: #fff;
text-decoration: none;
}
/* 二级菜单默认隐藏，定位在一级菜单右侧 */
.ver-menu .sub-menu {
position: absolute;
left: 100%;
top: 0;
width: 150px;
display: none;
background-color: #666;
}
.ver-menu .sub-menu li a {
display: block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
}
/* 鼠标悬停一级菜单项时显示二级菜单 */
.ver-menu .menu-item:hover .sub-menu {
display: block;
}
/* 交互反馈样式 */
.ver-menu .menu-item > a:hover {
background-color: #555;
}
.ver-menu .sub-menu li a:hover {
background-color: #888;
}三、实现要点总结
两种布局的实现核心逻辑一致，差异仅在于一级菜单的排列方式和二级菜单的定位方向：
- 父元素需要设置
position: relative，方便二级菜单做绝对定位 - 二级菜单默认通过
display: none隐藏，避免使用visibility导致无法触发子元素交互 - 通过父元素的
:hover伪类控制二级菜单的display属性切换，实现显示隐藏 - 水平菜单二级菜单定位
top设为一级菜单高度，left设为0；垂直菜单二级菜单定位left设为一级菜单宽度，top设为0
如果需要添加过渡动画，可以给二级菜单添加transition属性，将display切换改为opacity和transform的组合，避免display属性无法过渡的问题。