html+css多级目录手风琴式分类导航菜单
menu.html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>多级目录手风琴式分类导航菜单</title>
<link rel="stylesheet" type="text/css" charset="utf-8" href="menu.css">
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("div").click(function() {
//slideToggle([speed],[easing],[fn])
//通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
$(this).children('ul').slideToggle();
});
});
</script>
</head>
<body>
<div style="background: skyblue;height: 900px">
<div align="center" style="font-size: 50px;color: aqua;">
多级目录手风琴式分类导航菜单</div>
<div class="div">
<div>
<p>js特效</p>
<ul>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
</div>
<div>
<p>前端模板</p>
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
</ul>
</div>
<div>
<p>网站源码</p>
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
</ul>
</div>
<div>
<p>****</p>
<ul>
<li>Item 4-1</li>
<li>Item 4-2</li>
<li><p>List 4-1</p></li>
</ul>
</div>
</div>
</div>
</body>
</html>
menu.css代码：
@charset "utf-8";
*{
margin:0px;
padding:0px;
font-size:18px;
list-style:none;
background:skyblue;
}
.div{
padding: 3px;
margin:50px auto;
width:400px;
border:1px solid #ccc;
border-radius: 10px 10px 10px 10px;
background-color: cadetblue;
}
.div p{
height:50px;
line-height:25px;
background:lightblue;
font-weight:bold;
border-bottom:1px solid #ccc;
padding: 5px 5px;
}
.div div ul{
display:none;
}
.div li{
height:50px;
line-height:24px;
text-indent:20px;
border-bottom:1px solid #ccc;
}
.div p:hover{
color: aqua;
font-weight: bold;
}
.div li:hover{
color: white;
background: cadetblue;
}
效果：