<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
/*common*/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, blockquote, pre, form, input, textarea, fieldset, table, th, td { margin: 0; padding: 0; }
body, button, input, select, textarea { font: 12px/1.6 Tahoma, Verdana, Arial, "宋体";}
body { background:#090 ; color: #7d7d7d; }
ul, ol { list-style: none; }
img { border: none; vertical-align: top; }
:focus { outline: 0; }
/*float*/
.f-l { float: left; }
.f-r { float: right; }
.c-b { clear: both; }
.clear { clear: both; height: 0; font-size: 0; overflow: hidden; }
.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { clear: both; zoom: 1; }
.v-a-m { vertical-align: middle; }
/*font*/
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
.f-w-b { font-weight: bold; }
.f-w-n { font-weight: normal; }
.black { color: #000; }
.red { color: #f00; }
.gray { color: #999; }
.t-a-l { text-align: left; }
.t-a-c { text-align: center; }
.t-a-r { text-align: right; }
.t-d-u { text-decoration: underline; }
.f-s-12 { font-size: 12px; }
.f-s-14 { font-size: 14px; }
/*link*/
a { color: #151515; text-decoration: none; }
a:hover { color: #20a135; }
.menu a { color: #666 }
.menu a:hover { color: #20a135 }
.other a { color: #666; padding: 0 8px }
.other a:hover { color: #20a135 }
/*table*/
table { border-collapse: collapse; border-spacing: 0; }
/*layout*/
.m-b-10 { margin-bottom: 10px; }
.m-b-15 { margin-bottom: 15px; }
.m-a { margin: 0 auto; }
.doc-hd, .doc-bd { width: 960px; margin: 0 auto; }
.doc-bd { padding-bottom: 20px; }
.main { width: 623px; float: left; }
.side { width: 318px; float: right; border: 1px solid #f0f0f0; border-top: none; }
.bd { padding: 10px 15px; }
/*css sprite*/
.logo { background: url(http://p9.qhimg.com/t01ddd535ebb99c2588.png) no-repeat; }
.list .pic { background: url(http://p0.qhimg.com/t01751613f8222fc36f.jpg) no-repeat; }
.btn, .t-2, .tlist-1 li, .tlist-2 li, .tlist-3 li, .list h3 .new, .nav .hot, .nav .new, .list h3 .hot { background: url(http://p6.qhimg.com/t019c74450c3f79ebaa.png) no-repeat; }
/*header*/
.doc-hd { height: 52px; position: relative; z-index: 999; background:#fff; }
.logo { width: 129px; height: 46px; float: left; margin-top: 4px; margin-left: -7px }
.info { float: left; margin-top: 8px; }
.info a { color: #7D7D7D; font-size: 12px }
.info a:hover { color: #20a135; }
.info img { padding-top: 4px }
.nav { float: right; font: 16px/25px "微软雅黑"; position: absolute; right: 0; top: 16px; }
.nav li { float: left; margin-left: 38px; }
.nav a { height: 34px; color: #555; float: left; cursor: pointer; position: relative; }
.nav a:hover, .nav .cur { color: #20a135; }
.nav .hot, .nav .new { background-position: -24px -144px; width: 23px; height: 14px; display: block; position: absolute; right: -24px; top: -2px; *top:-3px;
}
.nav .new { background-position: 0 -144px; }
.nav .menu-on { background: url(http://w.qhimg.com/images/v2/site/360/817/arr_1.gif) no-repeat 50% 100%; }
.menu { width: 214px; background: #fff; font: 14px/33px "微软雅黑"; color: #5f5f5f; border-top: 3px solid #20a135; border-left: none; box-shadow: 2px 2px 2px rgba(6, 0, 1, 0.2); position: absolute; top: 50px; z-index: 999; padding: 0 8px; }
.menu-pc {width: 107px; left: 330px; }
.menu-mobile {width: 107px; left: 432px; }
.menu-special { width: 107px; left: 533px; }
.menu-personal {width: 107px; left: 638px; }
.menu-com { width: 107px; left: 738px; }
.menu-game { width: 107px; left: 838px; }
.menu-bbs { width: 107px; right: 0; }
.menu li { width: 87px; float: left; border-bottom: 1px solid #f3f3f3; padding: 0 10px; }
.menu .last { border-bottom: none; padding-bottom: 3px }
.menu-special li { width: 92px; }
</style>
</head>
<body>
<div class="doc-hd">
<a href="#" class="logo" title="360安全中心" target="_self"></a>
<ul class="nav">
<li><a href="#" class="cur" target="_self">首页</a></li>
<li class="has-menu"><a >电脑软件</a></li>
<li class="has-menu"><a>手机软件</a></li>
<li class="has-menu"><a href="#">特供手机</a></li>
<li class="has-menu"><a >个人服务</a></li>
<li class="has-menu"><a >企业服务</a></li>
<li class="has-menu"><a href="#">游戏</a></li>
<li class="has-menu"><a href="#">论坛</a></li>
</ul>
<div class="menu menu-pc" style="display:none;">
<ul>
<li><a href="#">安全卫士</a></li>
<li><a href="#">杀毒</a></li>
<li><a href="#">安全浏览器</a></li>
<li><a href="#">极速浏览器</a></li>
<li><a href="#">安全桌面</a></li>
<li class="last"><a href="#">游戏保险箱</a></li>
</ul>
</div>
<div class="menu menu-mobile" style="display: none;">
<ul>
<li><a href="#">手机卫士</a></li>
<li><a href="#">手机助手</a></li>
<li><a href="#">手机浏览器</a></li>
<li><a href="#/">Pad浏览器</a></li>
<li class="last"><a href="#">手机优化大师</a></li>
</ul>
</div>
<div class="menu menu-special" style="display: none;">
<ul>
<li><a href="#">海尔超级战舰</a></li>
<li><a href="#">夏新大V</a></li>
<li><a href="#">青橙绽放</a></li>
<li class="last"><a href="#">特供机论坛</a></li>
</ul>
</div>
<div class="menu menu-personal" style="display:none;">
<ul>
<li><a href="#">软件百科</a></li>
<li><a href="#">软件宝库</a></li>
<li><a href="#">安全播报</a></li>
<li><a href="#">电脑专家</a></li>
<li class="last"><a href="#">我喜欢网</a></li>
</ul>
</div>
<div class="menu menu-com" style="display:none;">
<ul>
<li><a href="#">360企业版</a></li>
<li><a href="#">360开放平台</a></li>
<li><a href="#">软件安全检测</a></li>
<li class="last"><a href="#">网站安全检测</a></li>
</ul>
</div>
<div class="menu menu-game" style="display:none;">
<ul>
<li><a href="#">360千军</a></li>
<li><a href="#">神魔仙界</a></li>
<li><a href="#">热血海贼王</a></li>
<li><a href="#">斗地主2</a></li>
<li class="last"><a href="#">光荣使命</a></li>
</ul>
</div>
<div class="menu menu-bbs" style="display:none;">
<ul>
<li><a href="#">360论坛</a></li>
<li class="last"><a href="#">求助中心</a></li>
</ul>
</div>
</div>
</body>
</html>
<script src="360nav.js"></script>
<script>
(function(){
//标签切换
var menuTabs = W('.has-menu'),
menuList = W('.menu');
menuTabs.forEach(function(el,i){
W([el,menuList[i]]).hover(function(e){
clearTimeout(el.__menuTemer);
menuTabs.removeClass('menu-on');
W(el).addClass('menu-on');
menuList.item(i).show();
},function(e){
el.__menuTemer = setTimeout(function(){
menuList.item(i).hide();
W(el).removeClass('menu-on');
},100);
});
});
}());
</script>
360官网CSS导航样式
4星 · 超过85%的资源 需积分: 12 198 浏览量
2013-09-06
14:29:15
上传
评论
收藏 23KB ZIP 举报 
360导航.zip （2个子文件） 
360nav.js 62KB
360nav.html 7KB资源评论
sgyzyhp2021-10-08不错，收藏一下。
G_Jehovah2016-04-25挺好的，感谢！！！！！
a1024702013-11-30不值得，虽然是360的，我感觉2分不值了。
