在网页开发中，css3 menu通常指使用CSS3特性构建的导航菜单，它不依赖或很少依赖脚本，就能实现展开、高亮和动效。下面从结构到样式逐步说明它的用法。
一、搭建基础HTML结构
菜单大多用无序列表表示，外层用<nav>或<div>包裹，内部用<ul>和<li>写选项。这样语义清晰，也方便用CSS控制。
<nav class="css3-menu">
<ul>
<li><a href="#">首页</a></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>
二、用CSS3写样式与悬停效果
先清除默认样式，再让一级菜单横向排列。通过:hover控制子菜单显示，并用transition做出平滑过渡。
.css3-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.css3-menu li {
position: relative;
}
.css3-menu a {
display: block;
padding: 10px 16px;
color: #333;
text-decoration: none;
transition: background-color 0.3s ease;
}
.css3-menu a:hover {
background-color: #f2f2f2;
}
.css3-menu .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.css3-menu li:hover .submenu {
display: block;
}
三、添加CSS3动画效果
除了颜色变化，还能用transform给菜单项加动效，比如悬停时轻微上移或旋转图标。
.css3-menu li:hover {
transform: translateY(-2px);
}
.css3-menu .submenu li {
opacity: 0;
transform: translateY(10px);
transition: all 0.25s ease;
}
.css3-menu li:hover .submenu li {
opacity: 1;
transform: translateY(0);
}
四、响应式适配
在窄屏下可把菜单改为纵向排列，保证手机端可用。
@media (max-width: 600px) {
.css3-menu ul {
flex-direction: column;
}
.css3-menu .submenu {
position: static;
}
}
五、小结
css3 menu的用法核心就是：用标准列表写结构，用CSS3的伪类、过渡和变形控制交互。熟练后还能结合checkbox实现纯CSS下拉，无需写一行JS。