javascript：
<script type="text/javascript">
$(document).ready(function(){
$(".menu-li1 > a").click(function(){//点击菜单节点，展开菜单节点与隐藏菜单节点
$(this).next().toggle(500);
});
$(".menu-a").click(function(){//菜单主按钮 隐藏全部展开的节点
$(".menu-ul2").hide();
});
})
</script>body：
<body>
<div class="main">
<div class="main-top">
<h2>我们后台管理系统</h2>
</div>
<div class="main-middle">
<div class="main-left">
<a class="menu-a" href="#none">菜单</a>
<ul class="menu-ul1" >
<li class="menu-li1">
<a href="#none">商品管理</a>
<ul class="menu-ul2">
<li><a href="#none">新增商品</a></li>
<li><a href="#none">查询商品</a></li>
<li><a href="#none">规格参数</a></li>
</ul>
</li>
<li class="menu-li1">
<a href="#none">网站内容管理</a>
<ul class="menu-ul2">
<li><a href="#none">内容分类管理</a></li>
<li><a href="#none">内容管理</a></li>
</ul>
</li>
<li class="menu-li1">
<a href="#none">网站图片管理</a>
<ul class="menu-ul2">
<li><a href="#none">图片分类管理</a></li>
<li><a href="#none">图片管理</a></li>
</ul>
</li>
<li class="menu-li1">
<a href="#none">网站地址管理</a>
<ul class="menu-ul2">
<li><a href="#none">地址分类管理</a></li>
<li><a href="#none">地址管理</a></li>
</ul>
</li>
</ul>
</div>
<div class="main-right ">
</div>
</div>
<div class="main-bottom">
<h2>欢迎来到后台管理系统</h2>
</div>
</div>
</body>css：
<style type="text/css">
body{outline:0px;padding: 0px;margin: 0px;border: 0px;background-color:#F9F9F9;#overflow-x:hidden;}
.main{width:100%;height:100%;}
.main-top{width:100%;min-width:960px;height:100px;position:absolute;top:0px;background:url('../../image/main.png') no-repeat;background-size:cover;text-align:center;border-bottom:2px solid #7a7a7a;}
.main-top h2{color:#F9F9F9;}
.main-middle{display: flex;/*设置为flex布局*/justify-content: space-around;margin-top:100px;}
.main-left{width:200px;min-width:200px;height:960px;color:#F9F9F9;text-align:center;border-right:2px solid #7a7a7a;background:url('../../image/left.png') no-repeat;background-size:cover;}
.menu-ul1{color:#F9F9F9;}
.menu-li1{border:1px solid #F9F9F9;}
.menu-a{line-height:40px;text-decoration:none;color:#F9F9F9;}
li a:hover{color: #aaa;}
li a{text-decoration:none;color:#F9F9F9;line-height:40px;}
ul li{list-style:none;line-height:28px;}
.menu-ul2{display:none;background-color:#3366cc;opacity: 0.8}
.main-right{width:100%;height:960px;background:url('../../image/timg.jpg') no-repeat;background-size:cover;}
.main-bottom{width:100%;min-width:960px;height:100px;background:url('../../image/timg.png') no-repeat;background-size:cover;text-align:center;border-top:2px solid #7a7a7a;}
.main-bottom h2{color:#F9F9F9;}
</style>css里面的背景图片可以去掉，我的是为了好看的，记得引入jquery,自己去下载一个
<script type=”text/javascript” src=”../../js/jquery-1.8.3.js”></script>
