代码很简单 ， 就不多废话了 ， ： ：
复制代码代码如下:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "x-ua-kompatibel" konten = "ie = edge, chrome = 1">
<title> </title>
<meta name = "description" content = "">
<meta name = "kata kunci" content = "">
<link href = "" rel = "stylesheet">
<type skrip = "Teks/JavaScript">
fungsi hoversee () {
var list = document.geteLementById ('nav');
var zu = list.getElementsbyTagname ("li");
untuk (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>
<tyle>
*{
Font-Family: Microsoft Yahei;
Margin: 0;
Padding: 0;
}
tubuh {lebar: 100%;}
ul {List-style: none;}
A {Text-Decoration: None;}
#header {
Tinggi: 50px;
Line-Height: 50px;
Latar belakang:#455a6e;
}
#header h2,#header h3 {
Font-Weight: 500;
}
#header h2 {
Warna: #fff;
font-size: 18px;
Lebar: 180px;
Teks-Align: tengah;
Latar Belakang:#0D2E49;
}
#header h3 {color: #fff; font-size: 16px;}
.mycenter {
Lebar: 900px;
margin: 0 otomatis;
}
#header div.mycenter {
/*相对定位*//
Posisi: kerabat;
}
#nav {
Lebar: 180px;
Latar Belakang: RGBA (0, 102, 173, 0,5);
z-index: 999;
}
#nav li {
Tinggi: 40px;
Padding-kiri: 40px;
Line-Height: 40px;
Posisi: kerabat;
}
#nav h3 {height: 40px;}
#nav li dl {
Posisi: kerabat;
Kiri: 140px;
Atas: -40px;
Lebar: 150px;
Latar belakang: #FFF;
Tampilan: Tidak Ada;
padding: 8px 10px;
}
#nav dt {
Lebar: 150px;
Line-Height: 30px;
Tinggi: 30px;
Latar Belakang:#36C1AF;
Warna: #fff;
Teks-Align: tengah;
}
#nav dd a {
Tampilan: Blok;
Tinggi: 30px;
Lebar: 150px;
Ukuran font: 14px;
Warna:#858585;
}
#nav dd a: hover {
Dekorasi Teks: Garis Besar;
}
#isi{
Latar Belakang:#E95200;
Tinggi: 500px;
}
</tyle>
</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>
</ll>
</li>
<li>
<h3> 首页管理 </h3>
<dl>
<dt> 首页管理 </dt>
<dd>
<a href = "#"> 轮转照片设置 </a>
<a href = "#"> 产品展示照片设置 </a>
<a href = "#"> 底部信息修改 </a>
</dd>
</ll>
</li>
<li>
<h3> 产品管理 </h3>
<dl>
<dt> 产品管理 </dt>
<dd>
<a href = "#"> 增加新产品 </a>
<a href = "#"> 管理全部产品 </a>
<a href = "#"> 类别管理 </a>
</dd>
</ll>
</li>
<li>
<h3> 新闻管理 </h3>
<dl>
<dt> 新闻管理 </dt>
<dd>
<a href = "#"> 发布新闻 </a>
<a href = "#"> 全部新闻管理 </a>
<a href = "#"> 增加系列 </a>
<a href = "#"> 新闻系列管理 </a>
</dd>
</ll>
</li>
<li>
<h3> 反馈管理 </h3>
<dl>
<dt> 反馈管理 </dt>
<dd>
<a href = "#"> 管理所有反馈 </a>
</dd>
</ll>
</li>
<li>
<h3> 企业信息管理 </h3>
<dl>
<dt> 企业信息管理 </dt>
<dd>
<a href = "#"> 企业简介 </a>
<a href = "#"> 企业联系方式设置 </a>
<a href = "#"> 人才招聘管理 </a>
</dd>
</ll>
</li>
<li>
<h3> 权限管理 </h3>
<dl>
<dt> 权限管理 </dt>
<dd>
<a href = "#"> 添加新管理员 </a>
<a href = "#"> 查看所有账号权限 </a>
<a href = "#"> 查看申诉 </a>
</dd>
</ll>
</li>
<li>
<h3> 功能管理 </h3>
<dl>
<dt> 功能管理 </dt>
<dd>
<a href = "#"> 一级功能设置 </a>
</dd>
</ll>
</li>
<li>
<h3> 权限查看与申请 </h3>
<dl>
<dt> 权限查看与申请 </dt>
<dd>
<a href = "#"> 查看自己的权限 </a>
<a href = "#"> 申请权限 </a>
</dd>
</ll>
</li>
</ul>
</div>
</div>
<Div id = "Content">
</div>
<Div id = "footer">
</div>
</body>
</html>
小伙伴们根据自己的需求 ， 将调用代码加进去就可以了 ， 自由发挥吧。