折叠菜单是网页中使用非常广泛的菜单，使用层级选择器结合元素的display属性可以轻松实现折叠菜单。
a)初始显示效果b)当鼠标悬停于第2个菜单时的显示效果
<body>
<ul class="box">
<!-- 第1个菜单项 -->
<li class="menu">
<h4>模块1</h4>
<ul>
<li><a>任务1.1</a></li>
<li><a>任务1.2</a></li>
<li><a>任务1.3</a></li>
</ul>
</li>
<!-- 第2个菜单项 -->
……
</ul>
</body>
<style>
.box {
/* 设置元素尺寸 */
width: 130px;
height: 260px;
/* 设置元素背景色与文字颜色 */
background-color: dodgerblue;
color: white;
/* 设置元素边距 */
padding: 5px 15px 10px 20px;
margin: 10px;
/* 设置不显示列表标识 */
list-style: none;
}
.menu ul {
/* 子菜单初始不显示 */
display: none;
}
.menu:hover>ul {
/* 鼠标悬停于一级菜单项时,显示对应的二级菜单 */
display: block;
}
</style>
这里还需要特别注意，必须是.menu:hover>ul这个选择器，在子菜单父元素上悬停显示子菜单，否则鼠标没办法进入子菜单。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
