： ， 就不多废话了 ： ：
复制代码代码如下:
<! doctype html>
<html>
<head>
<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">
<script type = "text/javaScript">
وظيفة hoversee () {
var list = document.getElementById ('nav') ؛
var zu = list.getElementSbyTagName ("li") ؛
لـ (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>
*{
Font-Family: Microsoft Yahei ؛
الهامش: 0 ؛
الحشو: 0 ؛
}
الجسم {العرض: 100 ٪ ؛}
ul {على غرار القائمة: لا شيء ؛}
A {text-decoration: none ؛}
#Header {
الارتفاع: 50 بكسل ؛
ارتفاع الخط: 50 بكسل ؛
الخلفية:#455a6e ؛
}
#Header H2 ،#Header H3 {
خط الرصيف: 500 ؛
}
#Header H2 {
اللون: #fff ؛
حجم الخط: 18 بكسل ؛
العرض: 180 بكسل ؛
محاذاة النص: المركز ؛
الخلفية:#0d2e49 ؛
}
#Header H3 {color: #fff ؛ font-size: 16px ؛}
.mycenter {
العرض: 900 بكسل ؛
الهامش: 0 Auto ؛
}
#header div.mycenter {
/*相对定位*/
الموقف: قريب
}
#NAV {
العرض: 180 بكسل ؛
الخلفية: RGBA (0 ، 102 ، 173 ، 0.5) ؛
Z-index: 999 ؛
}
#nav li {
الارتفاع: 40 بكسل ؛
حشو اليسار: 40 بكسل ؛
رفع الخط: 40 بكسل ؛
الموقف: قريب
}
#NAV H3 {الارتفاع: 40px ؛}
#nav li dl {
الموقف: قريب
اليسار: 140 بكسل ؛
أعلى: -40 بكسل ؛
العرض: 150 بكسل ؛
الخلفية: #fff ؛
العرض: لا شيء ؛
الحشو: 8px 10px ؛
}
#NAV DT {
العرض: 150 بكسل ؛
ارتفاع الخط: 30 بكسل ؛
الارتفاع: 30 بكسل ؛
الخلفية:#36C1AF ؛
اللون: #fff ؛
محاذاة النص: المركز ؛
}
#NAV DD A {
العرض: كتلة ؛
الارتفاع: 30 بكسل ؛
العرض: 150 بكسل ؛
حجم الخط: 14px ؛
اللون:#858585 ؛
}
#NAV DD A: Hover {
تدمير النص: تسطير ؛
}
#محتوى{
الخلفية:#E95200 ؛
الارتفاع: 500 بكسل ؛
}
</style>
</head>
<body>
<div id = "header">
<viv>
<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>
小伙伴们根据自己的需求 ， 将调用代码加进去就可以了 ， 自由发挥吧。