仿阿里巴巴顶部用户信息网站导航条
2011-12-14 18:55
316 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, lengend, button, input, textarea, form, th, td {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none outside none;
}
img {border:none;}
#topbar-v4 a {
text-decoration: none;
}
#topbar-v4 {
background-color: #F7F7F7;
border-bottom: 1px solid #D8D8D8;
border-top: 1px solid #D8D8D8;
height:23px;
}
#topbar-v4 .topbar-container {
font: 12px/23px Tahoma,Arial,"宋体",sans-serif;
height: 23px;
margin: 0 auto;
padding: 0 4px;
width: 952px;
}
#topbar-v4 a {
text-decoration: none;
}
#topbar-v4 a:hover {
color: #FF7300 !important;
}
#topbar-v4 .topnav li, #topbar-v4 .nav-arrow, #topbar-v4 .topnav-tp .contact-us, #topbar-v4 .topnav-tp .apply-form, #topbar-v4 .topnav-tp .join-promotion {
background: url("images/20111114.gif") no-repeat scroll 0 0 transparent;
}
#topbar-v4 li {
float: left;
}
#topbar-v4 .extra {
position: relative;
z-index: 1804;
}
#topbar-v4 .account-sign-status {
color: #444444;
float: left;
}
#topbar-v4 .account-sign-status a:link, #topbar-v4 .account-sign-status a:visited {
color: #336699;
}
#topbar-v4 .account-sign-status li {
padding: 0 5px;
}
#topbar-v4 .account-msg a span {
background-color: #FF7300;
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
margin-left: 2px;
padding: 0 4px;
}
#topbar-v4 .account-msg a:hover span {
background-color: #FF3300;
}
#topbar-v4 .topnav {
float: right;
}
#topbar-v4 .topnav a:link, #topbar-v4 .topnav a:visited {
color: #666666;
}
#topbar-v4 .topnav li {
background-position: right 6px;
}
#topbar-v4 .nav-title {
float: left;
height: 24px;
padding: 0 9px;
}
#topbar-v4 .extra:hover .nav-title, #topbar-v4 .nav-hover .nav-title {
background-color: #FFFFFF;
border-left: 1px solid #D1D1D1;
border-right: 1px solid #D1D1D1;
padding: 0 9px;
}
#topbar-v4 .topnav li.nav-hover-prev {
background: none repeat scroll 0 0 transparent;
}
#topbar-v4 .nav-arrow {
background-position: right -160px;
padding-right: 10px;
}
#topbar-v4 .topnav li:hover .nav-arrow, #topbar-v4 .topnav .nav-hover .nav-arrow {
background-position: right -190px;
}
#topbar-v4 .list-first {
background: none repeat scroll 0 0 transparent;
}
#topbar-v4 .nav-content {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #FFFFFF;
border-color: -moz-use-text-color #D1D1D1 #D1D1D1;
border-right: 1px solid #D1D1D1;
border-style: none solid solid;
border-width: 0 1px 1px;
display: none;
border-left:1px solid #D1D1D1;
border-bottom:1px solid #D1D1D1;
_border-top:1px solid #D1D1D1;
}
#topbar-v4 .topnav .extra:hover .nav-content, #topbar-v4 .topnav .nav-hover .nav-content {
display: block;
position: absolute;
top: 24px;
z-index: 2000;
}
#topbar-v4 .nav-content dl {
float: left;
padding: 0px 15px;
margin:10px 0px;
}
#topbar-v4 .nav-content dt {
color: #B0B0B0;
font-weight: 700;
}
#topbar-v4 .nav-content dd {
line-height: 24px;
}
#topbar-v4 .nav-content dd a{
padding-right: 10px;
}
#topbar-v4 .nav-content a:link, #topbar-v4 .nav-content a:visited {
color: #444444;
}
#topbar-v4 .topnav-myali .nav-content {
left: 0;
width: 330px;
}
#topbar-v4 .topnav-tp .nav-content {
left: 0;
width: 300px;
}
#topbar-v4 .topnav-tp .nav-content dd img{
vertical-align:middle;
margin-right:5px;
}
#topbar-v4 .topnav-tp .nav-content dd{
line-height:45px;
}
#topbar-v4 .topnav-sitemap .nav-content {
right: 0;
width: 430px;
}
.fd-hide {
display: none;
}
</style>
</head>
<body>
<div class="fd-clr" id="topbar">
<div id="topbar-v4">
<div class="topbar-container">
<div class="account-sign-status">
<ul>
<li class="account-welcome">您好，<span class="account-id">欢迎来到全球节能环保网</span></li>
<li class="account-signin">
<a target="_self" title="请登录" href="http://www.gesep.com/NewLogin/Login.aspx">请登录</a>
</li>
<li class="account-signup">
<a target="_self" title="免费注册" href="http://www.gesep.com/NewLogin/MemberRegister.aspx">免费注册</a>
</li>
<li class="account-signout fd-hide">
<a target="_self" title="退出" href="http://www.gesep.com/NewLogin/Login.aspx">退出</a>
</li>
</ul>
</div>
<div class="topnav">
<ul>
<li class="topnav-myali extra list-first" onmouseover="showNav(this)" onmouseout="hideNav(this)">
<div class="nav-title"><a title="我的会员中心" target="_blank" href="http://b2b.gesep.com/Admin/ComPany/Default.aspx" class="nav-arrow">我的会员中心</a></div>
<div class="nav-content" style="_height:140px;">
<dl style="border-right:1px solid #EEEEEE;">
<dt>供求服务</dt>
<dd><a target="_blank" title="发布产品" href="http://b2b.gesep.com/Admin/ComPany/EditProdcut.aspx">发布产品</a></dd>
<dd><a target="_blank" title="管理产品" href="http://b2b.gesep.com/Admin/ComPany/ProductList.aspx">管理产品</a></dd>
<dd><a target="_blank" title="发布采购信息" href="http://b2b.gesep.com/Admin/ComPany/EditBuy.aspx">发布采购信息</a></dd>
<dd><a target="_blank" title="发布会展信息" href="http://b2b.gesep.com/Admin/Company/Server/EditExhibition.aspx">发布会展信息</a></dd>
</dl>
<dl style="border-right:1px solid #EEEEEE;">
<dt>实力展示</dt>
<dd><a target="_blank" title="荣誉资质" href="http://b2b.gesep.com/Admin/Company/HonorList.aspx">荣誉资质</a></dd>
<dd><a target="_blank" title="技术优势" href="http://b2b.gesep.com/Admin/Company/Tech/TechList.aspx">技术优势</a></dd>
<dd><a target="_blank" title="管理品牌" href="http://b2b.gesep.com/Admin/ComPany/BrandList.aspx">管理品牌</a></dd>
<dd> </dd>
</dl>
<dl>
<dt>工具</dt>
<dd><a target="_blank" title="消息中心" href="http://b2b.gesep.com/Admin/ComPany/CommentEnt.aspx">消息中心</a></dd>
<dd><a target="_blank" title="收藏夹" href="http://b2b.gesep.com/Admin/ComPany/SaveInfo.aspx">收藏夹</a></dd>
<dd> </dd>
<dd><a target="_blank" title="进入商务中心" href="http://b2b.gesep.com/Admin/ComPany/Default.aspx"><img src="images/btn_background.png" /></a></dd>
</dl>
</div>
</li>
<li class="topnav-tp extra" onmouseover="showNav(this)" onmouseout="hideNav(this)">
<div class="nav-title"><a target="_blank" title="会员服务" href="http://www.gesep.com/SiteAbout/Service0.html" class="nav-arrow">会员服务</a></div>
<div class="nav-content">
<dl>
<dt>推广套餐</dt>
<dd><a target="_blank" title="银牌会员" href="http://www.gesep.com/SiteAbout/Service0_277933.html"><img alt="银牌会员" src="images/yinpai.gif" />银牌会员</a></dd>
<dd><a target="_blank" title="金牌会员" href="http://www.gesep.com/SiteAbout/Service0_277933.html"><img alt="金牌会员" src="images/jinpai.png" />金牌会员</a></dd&g
c2dd
t;
<dd><a target="_blank" title="钻石会员" href="http://www.gesep.com/SiteAbout/Service0_277933.html"><img alt="钻石会员" src="images/zuanshi.png" />钻石会员</a></dd>
<dd><a target="_blank" title="全球通会员" href="http://www.gesep.com/SiteAbout/Service0_277933.html"><img alt="全球通会员" src="images/quanqiutong.png" />全球通会员</a></dd>
</dl>
<dl>
<dt>专项服务</dt>
<dd><a target="_blank" title="诚信认证" href="http://www.gesep.com/service/trust/index.aspx"><img alt="诚信认证" src="images/chengxin.png" />诚信认证</a></dd>
<dd><a target="_blank" title="会展服务" href="javascript:void(0)"><img alt="会展服务" src="images/huizhan.png" />会展服务</a></dd>
<dd><a target="_blank" title="G币支付" href="http://www.gesep.com/SiteAbout/Service0_277927.html"><img alt="G币支付" src="images/GB.png" />G币支付</a></dd>
<dd> </dd>
</dl>
<div style="clear:both;"></div>
<div style="text-align:right;padding-right:5px;">联系：021-61024899</div>
</div>
</li>
<li>
<div class="nav-title"><a target="_blank" title="在线投稿" href="http://www.gesep.com/News/Contribute.aspx">在线投稿</a></div>
</li>
<li>
<div class="nav-title"><a target="_blank" title="帮助中心" href="http://www.gesep.com/SiteAbout/Service3.html">帮助中心</a></div>
</li>
<li class="topnav-sitemap extra" onmouseover="showNav(this)" onmouseout="hideNav(this)">
<div class="nav-title"><a target="_blank" title="网站导航" href="http://www.gesep.com/map.html" class="nav-arrow">网站导航</a></div>
<div class="nav-content">
<dl style="border-right:1px solid #EEEEEE;">
<dt style="color:#000;font-weight:bold;">全球节能环保网</dt>
<dd>
<a target="_blank" title="新闻" href="http://www.gesep.com/news/index.html">新闻</a>
<a target="_blank" title="观察" href="http://www.gesep.com/observe/index.html">观察</a>
<a target="_blank" title="评论" href="http://www.gesep.com/comment/index.html">评论</a>
</dd>
<dd>
<a target="_blank" title="专题" href="http://www.gesep.com/special/index.html">专题</a>
<a target="_blank" title="低碳周刊" href="http://www.gesep.com/e-paper/default.aspx">低碳周刊</a>
</dd>
<dd><a target="_blank" title="研究中心" href="http://www.gesep.com/Experts/researchreport.aspx">研究中心</a></dd>
<dd><a target="_blank" title="分类信息" href="http://www.gesep.com/classification/index.html">分类信息</a></dd>
<dd>
<a target="_blank" title="专利" href="http://www.gesep.com/patent/index.html">专利</a>
<a target="_blank" title="法规" href="http://www.gesep.com/Law/index.html">法规</a>
<a target="_blank" title="标准" href="http://www.gesep.com/Standards/index.html">标准</a>
</dd>
</dl>
<dl style="border-right:1px solid #EEEEEE;">
<dt>子站</dt>
<dd><a target="_blank" title="设备网" href="http://b2b.gesep.com/index.html">设备网</a></dd>
<dd><a target="_blank" title="工程网" href="http://gc.gesep.com/">工程网</a></dd>
<dd><a target="_blank" title="会展网" href="http://www.gesep.com/Meeting/index.html">会展网</a></dd>
<dd><a target="_blank" title="知道" href="http://zhidao.gesep.com/">知道</a></dd>
<dd><a target="_blank" title="社区" href="http://bbs.gesep.com/">社区</a></dd>
</dl>
<dl>
<dt>节能环保网站群</dt>
<dd>
<a target="_blank" title="建筑节能" href="http://jzjn.gesep.com/">建筑节能</a>
<a target="_blank" title="水处理" href="http://water.gesep.com/">水处理</a>
<a target="_blank" title="节能锅炉" href="http://gl.gesep.com/">节能锅炉</a>
</dd>
<dd>
<a target="_blank" title="再生资源" href="http://re.gesep.com/">再生资源</a>
<a target="_blank" title="太阳能" href="http://solar.gesep.com/">太阳能</a>
<a target="_blank" title="节能电器" href="http://dq.gesep.com/">节能电器</a>
</dd>
<dt>行业应用</dt>
<dd>
<a target="_blank" title="钢铁" href="http://www.gesep.com/Template/Tech1/270.html">钢铁</a>
<a target="_blank" title="交通" href="http://www.gesep.com/Template/Tech1/272.html">交通</a>
<a target="_blank" title="建筑" href="http://www.gesep.com/Template/Tech1/355.html">建筑</a>
<a target="_blank" title="石油化工" href="http://www.gesep.com/Template/Tech1/274.html">石油化工</a>
</dd>
<dd>
<a target="_blank" title="电力" href="http://www.gesep.com/Template/Tech2/273.html">电力</a>
<a target="_blank" title="有色金属" href="http://www.gesep.com/Template/Tech1/276.html">有色金属</a>
</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function showNav(extradiv) {
var title = extradiv.getElementsByTagName('div')[0];
var content = extradiv.getElementsByTagName('div')[1];
var arrow = extradiv.getElementsByTagName('a')[0];
title.style.borderLeft = "1px solid #D1D1D1";
title.style.borderRight = "1px solid #D1D1D1";
title.style.padding = "0 9px";
title.style.backgroundColor = "#FFFFFF";
content.style.display = "block";
content.style.position = "absolute";
content.style.top = "24px";
content.style.zIndex = "2000";
arrow.style.backgroundPosition = "right -190px";
}
function hideNav(extradiv) {
var title = extradiv.getElementsByTagName('div')[0];
var content = extradiv.getElementsByTagName('div')[1];
var arrow = extradiv.getElementsByTagName('a')[0];
title.style.borderLeft = "none";
title.style.borderRight = "none";
title.style.padding = "0 9px";
title.style.backgroundColor = "";
content.style.display = "none";
arrow.style.backgroundPosition = "right -160px";
}
// $(".extra").mouseover(function() {
// $(this).find(".nav-content").eq(0).css({ display: "block", position: "absolute", top: "24px", "z-index": "2000" });
// $(this).find(".nav-title").eq(0).css({ "border-left": "1px solid #D1D1D1", "border-right": "1px solid #D1D1D1", padding: "0 9px", "background-color": "#FFFFFF" });
// $(this).find(".nav-arrow").eq(0).css({ "background-position": "right -190px" });
// }).mouseout(function() {
// $(this).find(".nav-content").eq(0).hide();
// $(this).find(".nav-title").eq(0).css({ "border-left": "none", "border-right": "none", padding: "0 9px" ,"background-color" : "" });
// $(this).find(".nav-arrow").eq(0).css({ "background-position": "right -160px" });
// });
</script>
</body>
</html>如果不是IE6的话JS都不用就可以了。
后来测试兼容性发现IE6不行果断加入JQUERY方法，领导说不是每个页面都导入了JQ文件，所以最后只好改用JS方法。。
下面是简单的效果图。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用户不在社交网站上分享你的品牌信息9大原因
- [置顶] 实现网站应用钉钉扫码登录，及查询用户详细信息
- MySpace出售用户信息给第三方 社交网站私密性遭考验
- 网络的四层架构与网站的数据库的用户信息表的设计
- 抓取 阿里巴巴网站 的 汽摩与配件 行业的商家联系信息名录
- MOSS网站与我的网站显示的登录用户信息不同
- 如何获取和利用“用户及其使用网站原因的信息”
- 国内最大程序员网站CSDN大量用户信息遭泄露
- Discuz!NT3.6与网站整合（操作用户信息）解决方案
- CSDN网站六百万用户信息外泄
- 9大原因用户不在社交网站上分享你的品牌信息
- [JSP 网站开发] 用户登录信息同步显示方案（struts2，jQuery）
- 俄罗斯黑客窃取全球12亿用户信息 42万家网站受影响
- 如何让用户更容易找到信息 优化网站信息架构方法谈
- python实现根据用户输入从电影网站获取影片信息的方法
- 多家网站百万用户信息泄露
- 【CURL】模拟登录网站并获取用户信息
- Adobe网站被侵 致150000用户信息被盗
- 2014，这些网站的用户信息被黑客拿到了