代碼很簡單，就不多廢話了，直接奉上代碼：：
複製代碼代碼如下：
<！ doctype html>
<html>
<頭>
<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”>
<腳本類型=“ 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;
</script>
<樣式>
*{
字體家庭：Microsoft Yahei；
保證金：0;
填充：0;
}
身體{寬度：100％;}
ul {list-style：none;}
一個{文本 - 任務：無;}
#header {
身高：50px;
線高：50px;
背景：＃455A6E;
}
#header H2，＃Header H3 {
字體重量：500;
}
#header H2 {
顏色：#fff;
字體大小：18px;
寬度：180px;
文字平衡：中心；
背景：＃0D2E49;
}
#header H3 {顏色：#fff; font-size：16px;}
.mycenter {
寬度：900px;
保證金：0自動；
}
#header div.mycenter {
/*相對定位*/
位置：相對；
}
#nav {
寬度：180px;
背景：RGBA（0，102，173，0.5）;
Z-Index：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;
}
</style>
</head>
<身體>
<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 =“ content”>
</div>
<div ID =“頁腳”>
</div>
</body>
</html>
小伙伴們根據自己的需求，將調用代碼加進去就可以了，自由發揮吧。 ，自由發揮吧。