萌新敢问大佬，这种效果怎样实现？求HTML代码和CSS代码和它的原理。

是需要一个弹出层效果吗，可以使用鼠标hover事件加上div就可以实现了

是这个效果吧

<!doctype html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="UTF-8" />
<style type="text/css">
#menu,#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu>li {
	position: relative;
	width: 100px;
	height: 20px;
	float: left;
	background-color: #9ff;
	transition: background-color 300ms;
}
#menu>li:hover {
	background-color: #9cf;
}
#menu>li>ul {
	position: absolute;
	min-width: 100%;
	top: 100%;
	background-color: #cff;
	max-height: 0px;
	overflow: hidden;
	opacity: 0;
	transition: all 600ms;
}
#menu>li:hover>ul {
	max-height: 120px;
	opacity: 1;
}
#menu>li li:hover {
	background-color: #99f;
}
</style>
</head>
<body>
<ul id="menu">
	<li>菜单1
		<ul>
			<li>子菜单1-1</li>
			<li>子菜单1-2</li>
			<li>子菜单1-3</li>
			<li>子菜单1-3</li>
		</ul>
	</li>
	<li>菜单2
		<ul>
			<li>子菜单2-1</li>
			<li>子菜单2-2</li>
			<li>子菜单2-3</li>
		</ul>
	</li>
</ul>
</body>
</html>

您的问题已经有小伙伴解答了，请点击【采纳】按钮，采纳帮您提供解决思路的答案，给回答的人一些鼓励哦～～

ps:开通问答VIP，享受5次/月有问必答服务，了解详情↓↓↓

【电脑端】戳>>> https://vip.csdn.net/askvip?utm_source=1146287632
【APP 】戳>>> https://mall.csdn.net/item/52471?utm_source=1146287632