html⼆级菜单
先放效果图：
⾸先设置菜单的基本轮廓
<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>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#nav{
background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
}
餐饮美食食谱网站html模板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>