代碼很簡單,就不多廢話了,直接奉上代碼::
複製代碼代碼如下:
<! 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>
小伙伴們根據自己的需求,將調用代碼加進去就可以了,自由發揮吧。 ,自由發揮吧。