代码很简单,就不多废话了,直接奉上代码::
复制代码代码如下:
<!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>
小伙伴们根据自己的需求,将调用代码加进去就可以了,自由发挥吧。,自由发挥吧。