<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,div,ul,li,p{margin:0;padding:0;}
body{font:12px/1.5 Arial;}
ul{list-style-type:none;}
#nav,#nav ul,#nav ul li,#nav ul li a:hover,#nav .subnav,#nav .subnav p,#nav .subnav p span,#nav .subnav .arrow{background:url(img/nav_bg.png) no-repeat;}
#nav{position:relative;width:910px;background-position:0 -36px;margin:10px auto;}
#nav ul{height:36px;line-height:36px;margin-left:10px;padding-right:10px;overflow:hidden;background-position:right -72px;}
#nav ul li{float:left;width:110px;margin-left:-2px;background-position:0 -108px;}
#nav ul li a{font-size:14px;color:#fff;width:102px;display:block;text-align:center;text-decoration:none;margin:0 2px 0 4px;}
#nav ul li a:hover{font-weight:700;background-position:-3px -144px;}
#nav .subnav{display:none;position:absolute;top:41px;width:auto!important;min-width:110px;height:27px;line-height:27px;white-space:nowrap;background-position:0 -180px;}
#nav .subnav p{margin-left:10px;padding-right:10px;background-position:right -234px;}
#nav .subnav p span{display:block;color:#235e99;background-repeat:repeat-x;background-position:0 -207px;}
#nav .subnav p a{font-size:12px;display:inline;color:#235e99;text-decoration:none;margin:0 5px;padding:0 2px;}
#nav .subnav p a:hover{font-weight:400;background-image:none;border-bottom:2px solid;}
#nav .subnav .arrow{position:absolute;top:-4px;display:block;width:11px;height:5px;background-position:0 -261px;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="javascript:;">站长之家</a></li>
<li>
<a href="javascript:;">行业资讯</a>
<div class="subnav">
<em class="arrow"></em>
<p>
<span>
<a href="javascript:;">业界动态</a>|
<a href="javascript:;">收购融资</a>|
<a href="javascript:;">门户动态</a>|
<a href="javascript:;">搜索引擎</a>|
<a href="javascript:;">网络游戏</a>|
<a href="javascript:;">电子商务</a>|
<a href="javascript:;">广告传媒</a>|
<a href="javascript:;">厂商开发</a>
</span>
</p>
</div>
</li>
<li>
<a href="javascript:;">站长在线</a>
<div class="subnav">
<em class="arrow"></em>
<p>
<span>
<a href="javascript:;">站长报道</a>|
<a href="javascript:;">好站推荐</a>|
<a href="javascript:;">站长聚会</a>|
<a href="javascript:;">站长访谈</a>|
<a href="javascript:;">站长茶馆</a>|
<a href="javascript:;">网站排行</a>
</span>
</p>
</div>
</li>
<li>
<a href="javascript:;">网站运营</a>
<div class="subnav">
<em class="arrow"></em>
<p>
<span>
<a href="javascript:;">建站经验</a>|
<a href="javascript:;">策划盈利</a>|
<a href="javascript:;">搜索优化</a>|
<a href="javascript:;">网站推广</a>|
<a href="javascript:;">免费资源</a>
</span>
</p>
</div>
</li>
<li>
<a href="javascript:;">设计在线</a>
<div class="subnav">
<em class="arrow"></em>
<p>
<span>
<a href="javascript:;">酷站推荐</a>|
<a href="javascript:;">网页设计</a>|
<a href="javascript:;">WEB标准</a>|
<a href="javascript:;">视频处理</a>|
<a href="javascript:;">设计活动</a>
</span>
</p>
</div>
</li>
<li>
<a href="javascript:;">网络编程</a>
<div class="subnav">
<em class="arrow"></em>
<p>
<span>
<a href="javascript:;">Asp编程</a>|
<a href="javascript:;">Php编程</a>|
<a href="javascript:;">.Net编程</a>|
<a href="javascript:;">Xml编程</a>|
<a href="javascript:;">Access</a>|
<a href="javascript:;">Mssql</a>|
<a href="javascript:;">Mysql</a>
</span>
</p>
</div>
</li>
<li>
<a href="javascript:;">联盟资讯</a>
<div class="subnav">
<em class="arrow"></em>
<p>
<span>
<a href="javascript:;">联盟动态</a>|
<a href="javascript:;">联盟介绍</a>|
<a href="javascript:;">联盟点评</a>|
<a href="javascript:;">网赚技巧</a>
</span>
</p>
</div>
</li>
<li>
<a href="javascript:;">服务器</a>
<div class="subnav">
<em class="arrow"></em>
<p>
<span>
<a href="javascript:;">Web服务器</a>|
<a href="javascript:;">Ftp服务器</a>|
<a href="javascript:;">Mail服务器</a>|
<a href="javascript:;">Dns服务器</a>|
<a href="javascript:;">Win服务器</a>|
<a href="javascript:;">Linux服务器</a>|
<a href="javascript:;">安全防护</a>|
<a href="javascript:;">虚拟主机</a>
</span>
</p>
</div>
</li>
</ul>
</div>
</body>
<script>
var get = {
getId:function(ele){
return document.getElementById(ele);
},
getClass:function(ele){
return document.getElementsByClassName(ele);
},
getTagName:function(ele,obj){
return (obj || document).getElementsByTagName(ele);
}
};
window.onload = function(){
var aLi = get.getTagName('li');
var asubnav = get.getClass('subnav');
var oNav = get.getId('nav');
var oEm = get.getClass('arrow');
var timer = null;
for(var i = 0,len = aLi.length;i<len;i++){
aLi[i].onmouseout = function(){
timer = setTimeout(function(){
for(var j = 0;j<aLi.length;j++){
aLi[j].children[1].style.display = 'none';
}
},300);
}
aLi[i].onmouseover = function(){
var thisChild = this.children[1];
thisChild ? thisChild.style.display = 'block':null;
if(oNav.offsetWidth < (thisChild.offsetWidth+thisChild.offsetLeft)){
thisChild.style.right = 0;
}
}
}
}
</script>
</html>
添加回答
举报
0/150
提交
取消