代码很简单、就不多废话了、直接奉上代码：
复制代码代码如下：
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<meta http-equiv = "x-ua-compatible" content = "ie = edge、chrome = 1">
<title> </title>
<メタ名= "説明" content = "">
<Meta name = "keywords" content = "">
<link href = "" rel = "styleSheet">
<script type = "text/javascript">
function hoversee（）{
var list = document.getElementById（ 'nav'）;
var zu = list.getElementsByTagname（ "li"）;
for（var i = 0; i <9; i ++）
{
zu [i] .onmouseover = function（）{
this.getElementsByTagname（ 'dl'）[0] .style.display = "block";
}
zu [i] .onmouseout = function（）{
this.getElementsByTagname（ 'dl'）[0] .style.display = "none";
}
}
}
window.onload = hoversee;
</script>
<style>
*{
フォントファミリー：Microsoft Yahei;
マージン：0;
パディング：0;
}
ボディ{幅：100％;}
ul {list-style：none;}
A {テキストデコレーション：なし;}
＃ヘッダ{
高さ：50px;
ラインハイト：50px;
背景：＃455A6E;
}
#header H2、＃ヘッダーH3 {
font-weight：500;
}
#header H2 {
色：#fff;
フォントサイズ：18px;
幅：180px;
テキストアライグ：センター;
背景：＃0D2E49;
}
#header H3 {color：#fff; font-size：16px;}
.mycenter {
幅：900px;
マージン：0 Auto;
}
#header div.mycenter {
/*相对定位*/
位置：相対;
}
#nav {
幅：180px;
背景：RGBA（0、102、173、0.5）;
Z-Index：999;
}
#nav li {
高さ：40px;
パディング左：40px;
Line-Height：40px;
位置：相対;
}
#NAV H3 {height：40px;}
#nav li dl {
位置：相対;
左：140px;
上：-40px;
幅：150px;
背景：#fff;
表示：なし;
パディング：8px 10px;
}
#nav dt {
幅：150px;
Line-Height：30px;
高さ：30px;
背景：＃36C1AF;
色：#fff;
テキストアライグ：センター;
}
#nav dd a {
表示：ブロック;
高さ：30px;
幅：150px;
フォントサイズ：14px;
色：＃858585;
}
#nav dd a：hover {
テキスト装置：下線;
}
＃コンテンツ{
背景：＃e95200;
高さ：500px;
}
</style>
</head>
<body>
<div id = "header">
<div>
<h2>后台管理菜单</h2>
<ul id = "nav">
<li>
<h3>帐号管理</h3>
<dl>
<dt>帐号管理</dt>
<dd>
<a href = "＃">修改密码</a>
<a href = "＃">修改用户名</a>
<a href = "＃">设置密保问题</a>
</dd>
</dl>
</li>
<li>
<h3>首页管理</h3>
<dl>
<dt>首页管理</dt>
<dd>
<a href = "＃">轮转照片设置</a>
<a href = "＃">产品展示照片设置</a>
<a href = "＃">底部信息修改</a>
</dd>
</dl>
</li>
<li>
<h3>产品管理</h3>
<dl>
<dt>产品管理</dt>
<dd>
<a href = "＃">增加新产品</a>
<a href = "＃">管理全部产品</a>
<a href = "＃">类别管理</a>
</dd>
</dl>
</li>
<li>
<h3>新闻管理</h3>
<dl>
<dt>新闻管理</dt>
<dd>
<a href = "＃">发布新闻</a>
<a href = "＃">全部新闻管理</a>
<a href = "＃">增加系列</a>
<a href = "＃">新闻系列管理</a>
</dd>
</dl>
</li>
<li>
<h3>反馈管理</h3>
<dl>
<dt>反馈管理</dt>
<dd>
<a href = "＃">管理所有反馈</a>
</dd>
</dl>
</li>
<li>
<h3>企业信息管理</h3>
<dl>
<dt>企业信息管理</dt>
<dd>
<a href = "＃">企业简介</a>
<a href = "＃">企业联系方式设置</a>
<a href = "＃">人才招聘管理</a>
</dd>
</dl>
</li>
<li>
<h3>权限管理</h3>
<dl>
<dt>权限管理</dt>
<dd>
<a href = "＃">添加新管理员</a>
<a href = "＃">查看所有账号权限</a>
<a href = "＃">查看申诉</a>
</dd>
</dl>
</li>
<li>
<h3>功能管理</h3>
<dl>
<dt>功能管理</dt>
<dd>
<a href = "＃">一级功能设置</a>
</dd>
</dl>
</li>
<li>
<h3>权限查看与申请</h3>
<dl>
<dt>权限查看与申请</dt>
<dd>
<a href = "＃">查看自己的权限</a>
<a href = "＃">申请权限</a>
</dd>
</dl>
</li>
</ul>
</div>
</div>
<div id = "content">
</div>
<div id = "footer">
</div>
</body>
</html>
小伙伴们根据自己的需求、将调用代码加进去就可以了、自由发挥吧。