HTML+CSS制作鼠标悬停可打开的折叠菜单（内含效果预览动画）

本文链接：https://blog.youkuaiyun.com/weixin_44520259/article/details/90287426

一、效果预览

二、代码实现

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>折叠菜单</title>
		<link rel="stylesheet" href="css/style.css" />
		
	</head>
	<body>
		<ul id='menu'>
			<li><a href='#'>A班</a>
				<ul class='boys'>
					<li>高嘉朗</li>
					<li>陆思恒</li>
					<li>刘也</li>
					<li>丰楚轩</li>
				</ul>
			</li>
			<li><a href="#">B班</a>
				<ul class='boys'>
					<li>贺俊雄</li>
					<li>张颜齐</li>
				</ul>
			</li>
			<li><a href='#'>C班</a>
				<ul class='boys'>
					<li>俞彬</li>
					<li>四正</li>
				</ul>
			</li>
			<li><a href='#'>F班</a>
				<ul class='boys'>
					<li>姚琛</li>
					<li>朱微之</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

style.css

*{
	padding:0;
	margin:0;
}

li{
	list-style: none;
	font-size:50px;
}
/*上面的设置取消了无序列表开头的小圆点，并把所有li元素里的字号设置为50像素*/

li a{
	color:darkblue;
	text-decoration: none;
}
/*上面把所有a元素里文本的下划线取消了，文本颜色设为深蓝，看起来更美观*/

#menu{
	width:500px;
	margin: 50px;
}

#menu>li{
	background-image:url(../img/无标题.PNG);
	background-repeat:no-repeat;
	text-indent:180px;
}
/*上面把所有外层的li,也就是显示班级的li背景设置为一张灰色细长的图片，这里一定更要注意取消平铺（repeat），否则效果会很难看*/

.boys{
	display:none;
	text-indent:100px;
}
/*上面的设置让class为boys的ul默认隐藏起来，并且在网页上不占位*/

#menu>li:hover .boys{
	display:block;
}
/*上面的设置很关键，当鼠标悬停在外层的li上面时，里面的ul就会显示出来*/