代码很简单， 就不多废话了， 直接奉上代码：
复制代码代码如下:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "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 = "ไม่มี";
-
-
-
window.onload = hoversee;
</script>
<style>
-
Font-Family: Microsoft Yahei;
มาร์จิ้น: 0;
Padding: 0;
-
ร่างกาย {width: 100%;}
ul {list-style: none;}
A {การกำหนดข้อความ: ไม่มี;}
#เฮดเดอร์ {
ความสูง: 50px;
ระดับความสูง: 50px;
ความเป็นมา:#455A6E;
-
#header h2,#ส่วนหัว h3 {
Font-Weight: 500;
-
#header h2 {
สี: #FFF;
ขนาดตัวอักษร: 18px;
ความกว้าง: 180px;
TEXT-ALIGN: CENTER;
ความเป็นมา:#0D2E49;
-
#header H3 {color: #FFF; FONT-SIZE: 16PX;}
.Mycenter {
ความกว้าง: 900px;
มาร์จิ้น: 0 อัตโนมัติ;
-
#header div.mycenter {
/*相对定位*/
ตำแหน่ง: ญาติ;
-
#nav {
ความกว้าง: 180px;
ความเป็นมา: RGBA (0, 102, 173, 0.5);
z-index: 999;
-
#nav li {
ความสูง: 40px;
Padding-Left: 40px;
สายไฟ: 40px;
ตำแหน่ง: ญาติ;
-
#NAV H3 {ความสูง: 40px;}
#nav li dl {
ตำแหน่ง: ญาติ;
ซ้าย: 140px;
ด้านบน: -40px;
ความกว้าง: 150px;
ความเป็นมา: #FFF;
แสดง: ไม่มี;
Padding: 8px 10px;
-
#nav dt {
ความกว้าง: 150px;
ระดับความสูง: 30px;
ความสูง: 30px;
ความเป็นมา:#36C1AF;
สี: #FFF;
TEXT-ALIGN: CENTER;
-
#nav dd a {
แสดง: บล็อก;
ความสูง: 30px;
ความกว้าง: 150px;
ขนาดตัวอักษร: 14px;
สี:#858585;
-
#nav dd a: โฮเวอร์ {
การตกแต่งข้อความ: ขีดเส้นใต้;
-
#เนื้อหา{
ความเป็นมา:#E95200;
ความสูง: 500px;
-
</style>
</head>
<body>
<div id = "ส่วนหัว">
<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 = "เนื้อหา">
</div>
<div id = "footer">
</div>
</body>
</html>
小伙伴们根据自己的需求， 将调用代码加进去就可以了， 自由发挥吧。