代码很简单，就不多废话了，直接奉上代码：：
复制代码代码如下：
<！doctype html>
<html>
<头>
<meta charset =“ utf-8”>
<meta http-equiv =“ x-ua兼容” content =“ ie = edge，chrome = 1”>
<title> </title>
<meta name =“描述” content =“”>
<meta name =“关键字” content =“”>
<link href =“” rel =“ stylesheet”>
<脚本类型=“ text/javascript”>
函数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>
<样式>
*{
字体家庭：Microsoft Yahei；
保证金：0;
填充：0;
}
身体{宽度：100％;}
ul {list-style：none;}
一个{文本 - 任务：无;}
#header {
身高：50px;
线高：50px;
背景：＃455A6E;
}
#header H2，＃Header H3 {
字体重量：500;
}
#header H2 {
颜色：#fff;
字体大小：18px;
宽度：180px;
文字平衡：中心；
背景：＃0D2E49;
}
#header H3 {颜色：#fff; font-size：16px;}
.mycenter {
宽度：900px;
保证金：0自动；
}
#header div.mycenter {
/*相对定位*/
位置：相对；
}
#nav {
宽度：180px;
背景：RGBA（0，102，173，0.5）;
Z-Index：999;
}
#nav li {
身高：40px;
左填充：40px;
线高：40px;
位置：相对；
}
#nav H3 {高度：40px;}
#nav li dl {
位置：相对；
左：140px;
顶部：-40px;
宽度：150px;
背景：#fff;
显示：无；
填充：8px 10px;
}
#nav dt {
宽度：150px;
线高：30px;
身高：30px;
背景：＃36C1AF;
颜色：#fff;
文字平衡：中心；
}
#nav dd a {
显示：块;
身高：30px;
宽度：150px;
字体大小：14px;
颜色：＃858585;
}
#nav dd a：悬停{
文本描述：下划线；
}
＃内容{
背景：＃e95200;
身高：500px;
}
</style>
</head>
<身体>
<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 =“页脚”>
</div>
</body>
</html>
小伙伴们根据自己的需求，将调用代码加进去就可以了，自由发挥吧。，自由发挥吧。