html 二级菜单

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

先放效果图：
在这里插入图片描述

首先设置菜单的基本轮廓

<div id="nav"><ul><li><a href="#">一级菜单1</a></li><li><a href="#">一级菜单2</a></li><li><a href="#" class="caidan3">菜单3</a><ul class="yincang"><li><a href="#">javascript</a></li><li><a href="#">子菜单2</a></li><li><a href="#">子菜单3</a></li></ul></li><li><a href="#">一级菜单3</a></li><li><a href="#">一级菜单4</a></li><li><a href="#">一级菜单5</a></li></ul></div>

基本原理就是二级菜单先设置隐藏，当鼠标放到一级菜单之上时再显示二级菜单

核心代码：

 ul li ul{display: none;}li:hover .yincang{display: block;}

注意要点

1.一级菜单和二级菜单必须在同一个父元素之下。
2. （这之前的必须是一级菜单的上一级，比如当前代码，一级菜单是“菜单三”，为a标签，那么这里就应该写它的上一级‘li’）li：hover .yincang（后面就直接写被隐藏的元素标签）
3. line-height: 设置行间距
4. text-decoration: none ：去除a元素的下划线
5. list-style：none ：去除 ul li的圆点

完整代码：

<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}#nav{background: #eee;width: 600px;height: 40px;margin: 0 auto;}ul{list-style:none;}ul li{float: left;line-height: 40px;text-align: center;position: relative;}a{text-decoration: none;color: #000;display: block;padding: 0 10px;height: 40px;}a:hover{color: #fff;background: #666;}ul li ul li{float: none;background: #eee;margin-top: 2px;}ul li ul{position: absolute;left: 0;top: 40px;}ul li ul li a{width: 80px;}ul li ul li a:hover{background: #06f;}ul li ul{display: none;}.yiji:hover .yincang{display: block;}</style>
</head>
<body>
<div id="nav"><ul><li><a href="#">一级菜单1</a></li><li><a href="#">一级菜单2</a></li><li class="yiji"><a href="#" class="caidan3">菜单3</a><ul class="yincang"><li><a href="#">javascript</a></li><li><a href="#">子菜单2</a></li><li><a href="#">子菜单3</a></li></ul></li><li><a href="#">一级菜单3</a></li><li><a href="#">一级菜单4</a></li><li><a href="#">一级菜单5</a></li></ul></div>
</body>
</html>