二级菜单

article/2025/8/23 9:47:12

原理：

其核心就是两层ul进行嵌套
当鼠标移动到一级菜单时，其对应的二级菜单自动展开

下面我们来看具体的代码：

<div class="menu-box"><ul><li><a href="#">首页</a></li><li><a href="#">课程大纲</a><ul><li><a href="#">html</a></li><li><a href="#">css</a></li><li><a href="#">html5</a></li><li><a href="#">css3</a></li><li><a href="#">javascript</a></li></ul></li><li><a href="#">实操</a><ul><li><a href="#">html实操</a></li><li><a href="#">css实操</a></li><li><a href="#">html5实操</a></li><li><a href="#">css3实操</a></li><li><a href="#">javascript实操</a></li></ul></li><li><a href="#">关于我们</a><ul><li><a href="#">网站历史</a></li><li><a href="#">客服</a></li><li><a href="#">联系方式</a></li></ul></li></ul>
</div>

/*index.css*/
a {text-decoration: none;color: #000;
}ul,li {list-style: none;
}.menu-box {position: relative;width: 500px;margin: 50px auto;height: 40px;background-color: #0099cc;
}.menu-box ul {padding: 0;
}.menu-box>ul>li {width: 120px;height: 40px;float: left;line-height: 40px;text-align: center;margin-right: 6.67px;
}.menu-box>ul>li:last-child {margin-right: 0;
}.menu-box>ul>li:hover {background-color: #ccc;
}.menu-box>ul>li:hover a {color: #fff;
}.menu-box ul li>ul {display: none;background-color: skyblue;
}.menu-box ul li:hover ul {display: block;
}.menu-box ul li>ul li:hover {/* background-color: #4a9fb6; */background-color: #3d6061;
}.menu-box ul li>ul li:hover a {font-size: 16px;
}