代码很简单 ， 就不多废话了 ， 直接奉上代码:
复制代码代码如下:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<Title> </title>
<meta name = "description" content = "">
<meta name = "Keywords" content = "">
<link href = "" rel = "STILEET">
<script type = "text/javascript">
função hoversee () {
var lista = 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 = "bloco";
}
zu [i] .onmouseout = function () {
this.getElementsByTagName ('dl') [0] .style.display = "nenhum";
}
}
}
window.onload = hoversee;
</script>
<estilo>
*{
Fonte-família: Microsoft Yahei;
margem: 0;
preenchimento: 0;
}
corpo {largura: 100%;}
Ul {estilo de lista: nenhum;}
a {decoração de texto: nenhum;}
#cabeçalho{
Altura: 50px;
altura da linha: 50px;
Antecedentes:#455A6E;
}
#Header H2,#cabeçalho H3 {
Peso da fonte: 500;
}
#Header H2 {
Cor: #FFF;
Size da fonte: 18px;
Largura: 180px;
Alinhamento de texto: centro;
Antecedentes:#0d2e49;
}
#Header H3 {color: #fff; font-size: 16px;}
.myCenter {
Largura: 900px;
margem: 0 automático;
}
#Header div.myCenter {
/*相对定位*/
Posição: relativa;
}
#nav {
Largura: 180px;
Antecedentes: RGBA (0, 102, 173, 0,5);
Z-Index: 999;
}
#nav li {
Altura: 40px;
preenchimento-esquerda: 40px;
altura da linha: 40px;
Posição: relativa;
}
#nav h3 {altura: 40px;}
#nav li dl {
Posição: relativa;
Esquerda: 140px;
topo: -40px;
Largura: 150px;
Antecedentes: #FFF;
Exibir: Nenhum;
preenchimento: 8px 10px;
}
#nav dt {
Largura: 150px;
altura de linha: 30px;
Altura: 30px;
Antecedentes:#36C1AF;
Cor: #FFF;
Alinhamento de texto: centro;
}
#nav dd a {
exibição: bloco;
Altura: 30px;
Largura: 150px;
Size da fonte: 14px;
Cor:#858585;
}
#nav dd a: hover {
Decoração de texto: sublinhado;
}
#contente{
Antecedentes:#e95200;
Altura: 500px;
}
</style>
</head>
<Body>
<div id = "cabeçalho">
<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 = "rodapé">
</div>
</body>
</html>
小伙伴们根据自己的需求 ， 将调用代码加进去就可以了 ， 自由发挥吧。