代码很简单 ， 就不多废话了 ， 直接奉上代码:
复制代码代码如下:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<meta http-equiv = "x-ua compatible" contenu = "ie = edge, chrome = 1">
<Title> </Title>
<meta name = "Description" content = "">
<meta name = "keywords" contenu = "">
<link href = "" rel = "Stylesheet">
<script type = "text / javascript">
fonction hoversee () {
var list = document.getElementById ('nav');
var zu = list.getElementsByTagName ("li");
pour (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 = "Aucun";
}
}
}
window.onload = hoversee;
</cript>
<style>
* {
Font-Family: Microsoft Yahei;
marge: 0;
rembourrage: 0;
}
corps {largeur: 100%;}
ul {style liste: aucun;}
a {text-decoration: aucun;}
#Header {
hauteur: 50px;
hauteur de ligne: 50px;
Contexte: # 455A6E;
}
#Header H2, # En-tête H3 {
Police-poids: 500;
}
#header h2 {
Couleur: #FFF;
taille de police: 18px;
Largeur: 180px;
Texte-aligne: Centre;
Contexte: # 0d2e49;
}
#Header H3 {Color: #fff; Font-Size: 16px;}
.mycenter {
Largeur: 900px;
marge: 0 auto;
}
#Header div.mycenter {
/ * 相对定位 * /
Position: relative;
}
#nav {
Largeur: 180px;
Contexte: RGBA (0, 102, 173, 0,5);
Z-Index: 999;
}
#nav li {
hauteur: 40px;
padding-gauche: 40px;
hauteur de ligne: 40px;
Position: relative;
}
#nav h3 {hauteur: 40px;}
#nav li dl {
Position: relative;
Gauche: 140px;
en haut: -40px;
Largeur: 150px;
Contexte: #FFF;
Affichage: aucun;
rembourrage: 8px 10px;
}
#nav dt {
Largeur: 150px;
hauteur de ligne: 30px;
hauteur: 30px;
Contexte: # 36c1af;
Couleur: #FFF;
Texte-aligne: Centre;
}
#nav dd a {
Affichage: bloc;
hauteur: 30px;
Largeur: 150px;
taille de police: 14px;
Couleur: # 858585;
}
#nav dd a: hover {
Décoration du texte: soulignement;
}
#contenu{
Contexte: # E95200;
hauteur: 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 = "contenu">
</div>
<div id = "footer">
</div>
</docy>
</html>
小伙伴们根据自己的需求 ， 将调用代码加进去就可以了 ， 自由发挥吧。