最初にエフェクト画像を入れます：
まずメニューの基本概要を設定
<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.第1レベルのメニューと第2レベルのメニューは、同じ親要素の下にある必要があります。
2.（前のコードは現在のコードなどの第1レベルのメニューの上位レベルである必要があります。第1レベルのメニューはラベルである「メニュー3」であり、上位レベル '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>