代码很简单、就不多废话了、直接奉上代码:
复制代码代码如下:
<!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<meta http-equiv = "x-ua-compatible" content = "ie = edge、chrome = 1">
<title> </title>
<メタ名= "説明" content = "">
<Meta name = "keywords" content = "">
<link href = "" rel = "styleSheet">
<script type = "text/javascript">
function 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>
<style>
*{
フォントファミリー:Microsoft Yahei;
マージン:0;
パディング:0;
}
ボディ{幅:100%;}
ul {list-style:none;}
A {テキストデコレーション:なし;}
#ヘッダ{
高さ:50px;
ラインハイト:50px;
背景:#455A6E;
}
#header H2、#ヘッダーH3 {
font-weight:500;
}
#header H2 {
色:#fff;
フォントサイズ:18px;
幅:180px;
テキストアライグ:センター;
背景:#0D2E49;
}
#header H3 {color:#fff; font-size:16px;}
.mycenter {
幅:900px;
マージン:0 Auto;
}
#header div.mycenter {
/*相对定位*/
位置:相対;
}
#nav {
幅:180px;
背景:RGBA(0、102、173、0.5);
Z-Index:999;
}
#nav li {
高さ:40px;
パディング左:40px;
Line-Height:40px;
位置:相対;
}
#NAV H3 {height:40px;}
#nav li dl {
位置:相対;
左:140px;
上:-40px;
幅:150px;
背景:#fff;
表示:なし;
パディング:8px 10px;
}
#nav dt {
幅:150px;
Line-Height:30px;
高さ:30px;
背景:#36C1AF;
色:#fff;
テキストアライグ:センター;
}
#nav dd a {
表示:ブロック;
高さ:30px;
幅:150px;
フォントサイズ:14px;
色:#858585;
}
#nav dd a:hover {
テキスト装置:下線;
}
#コンテンツ{
背景:#e95200;
高さ:500px;
}
</style>
</head>
<body>
<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 = "footer">
</div>
</body>
</html>
小伙伴们根据自己的需求、将调用代码加进去就可以了、自由发挥吧。