代码很简单 代码很简单, 就不多废话了, 直接奉上代码 ：
复制代码代码如下 :
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge, chrome = 1">
<제목> </title>
<meta name = "description"content = "">
<meta name = "keywords"content = "">
<link href = ""rel = "스타일 시트">
<script type = "text/javaScript">
함수 hoversee () {
var list = 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 = "block";
}
zu [i] .onmouseout = function () {
this.getElementsByTagName ( 'dl') [0] .style.display = "none";
}
}
}
Window.onload = hoversee;
</스크립트>
<스타일>
*{
Font-Family : Microsoft Yahei;
여백 : 0;
패딩 : 0;
}
신체 {너비 : 100%;}
ul {목록 스타일 : 없음;}
a {텍스트 결정 : 없음;}
#header {
높이 : 50px;
라인 높이 : 50px;
배경 :#455A6E;
}
#header H2,#헤더 H3 {
글꼴 중량 : 500;
}
#header h2 {
색상 : #fff;
글꼴 크기 : 18px;
너비 : 180px;
텍스트 정렬 : 센터;
배경 :#0D2E49;
}
#header h3 {색상 : #fff; font-size : 16px;}
.MyCenter {
너비 : 900px;
여백 : 0 Auto;
}
#header div.mycenter {
/*相对定位*/
위치 : 상대;
}
#nav {
너비 : 180px;
배경 : RGBA (0, 102, 173, 0.5);
Z- 인덱스 : 999;
}
#Nav li {
높이 : 40px;
왼쪽 패딩 : 40px;
라인 높이 : 40px;
위치 : 상대;
}
#NAV H3 {높이 : 40px;}
#Nav li dl {
위치 : 상대;
왼쪽 : 140px;
상단 : -40px;
너비 : 150px;
배경 : #fff;
디스플레이 : 없음;
패딩 : 8px 10px;
}
#Nav dt {
너비 : 150px;
라인 높이 : 30px;
높이 : 30px;
배경 :#36C1AF;
색상 : #fff;
텍스트 정렬 : 센터;
}
#nav dd a {
디스플레이 : 블록;
높이 : 30px;
너비 : 150px;
글꼴 크기 : 14px;
색상 :#858585;
}
#NAV DD A : 호버 {
텍스트 결정 : 밑줄;
}
#콘텐츠{
배경 :#e95200;
높이 : 500px;
}
</스타일>
</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 = "content">
</div>
<div id = "바닥기">
</div>
</body>
</html>
小伙伴们根据自己的需求 小伙伴们根据自己的需求, 将调用代码加进去就可以了, 自由发挥吧。