First put the effect picture:
First set the basic outline of the menu
<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>
The basic principle is that the secondary menu is set to hide first, and the secondary menu is displayed when the mouse is placed on the primary menu
Core code:
ul li ul{
display: none;
}
li:hover .yincang{
display: block;
}
Pay attention to the points
1. The first-level menu and the second-level menu must be under the same parent element.
2. (The previous one must be the upper level of the first-level menu, such as the current code, the first-level menu is "menu three", which is a label, then the upper level'li' should be written here) li: hover .yincang (write the hidden element label directly later)
3. line-height: set the line spacing
4. text-decoration: none: remove the underline of the a element
5. list-style: none: remove the dots of ul li
Complete code:
<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>