地球科学

在2013年份国家自然科学基金委员会项目聚集受理时期,中科院甘露子所共交给申请书45份,中科院引入立异切磋群众体育资金财产1份,申请数量在2018年的底子上抓好了51%。详细申请情状见下表:
收拾了下相比较常用的导航栏,其原理基本相通,顶尖菜单即主菜单,拔尖菜单的子成分正是二级菜单,二级菜单默许隐讳,通过鼠标移动来恒定和体现二级菜单。
在Javascript中能够透过onmouseover和onmouseout事件来贯彻鼠标进入离开成分,在Jquery中则足以接纳hover。代码如下:
$("#id").hover(
function(){
//当鼠标放上去的时候,程序处理
},
function(){
//当鼠标离开的时候,程序处理
});
以三个简易的菜系为例(结构卡塔 尔(英语:State of Qatar):
<ul>
<li>
菜单一
<div style="display:none;position:absolute;">
<ul>
<li>子菜单一</li>
<li>子菜单二</li>
</ul>
</div>
</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
<script>
$("li").hover(function () {
$(this).find("div").show();//这里还需要定位元素
}, function () {
$(this).find("div").hide();
});
</script>
组织很简短,重要的依旧体制。上边是常用的演示(样式冲突, 查看完整demo卡塔尔:
网址首页
个人消息
- 私家申请
- 民居房申请商品房申请
- 借款申请
- 机票申请
村办报名
- 个体申请
- 商品房申请商品房申请
- 借款申请
- 机票申请
- 任何申请
- 居室申请商品房申请
- 举债申请
- 机票申请
代码
<div class="c02-nav">
<div class="item">
网站首页
</div>
<div class="item">
个人信息
<div class="c02-menu">
<ul>
<li class="head">个人申请</li>
<li><a>住房申请住房申请</a></li>
<li><a>借款申请</a></li>
<li><a>机票申请</a></li>
</ul>
</div>
</div>
<div class="item">
个人申请
<div class="c02-menu">
<ul>
<li class="head">个人申请</li>
<li><a>住房申请住房申请</a></li>
<li><a>借款申请</a></li>
<li><a>机票申请</a></li>
</ul>
<ul>
<li class="head">其它申请</li>
<li><a>住房申请住房申请</a></li>
<li><a>借款申请</a></li>
<li><a>机票申请</a></li>
</ul>
</div>
</div>
</div>
html
* {
padding: 0;
margin: 0;
font-family: 微软雅黑,宋体,sans-serif !important;
}
a, img {
border: 0;
}
a {
outline: 0;
}
a:link {
color: #434343;
text-decoration: none;
}
a:visited {
color: #838383;
text-decoration: none;
}
a:hover {
color: #C00;
text-decoration: none;
}
.c02-nav {
background-repeat: repeat-x;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);
background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%);
height: 50px;
}
.c02-nav .logo {
float: left;
width: 120px;
margin-top: 10px;
margin-left: 10px;
}
.c02-nav .item {
display: inline-block;
padding: 15px;
color: #666;
cursor: pointer;
font-size: 15px;
}
.c02-nav .item:hover {
color: #333;
background-color: rgba(0,0,0,.075);
}
.c02-menu {
display: none;
padding: 10px;
z-index: 9999;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
-moz-box-shadow: 0 4px 16px rgba(0,0,0,.5);
-webkit-box-shadow: 0 4px 16px rgba(0,0,0,.5);
box-shadow: 0 4px 16px rgba(0,0,0,.5);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=180, Strength=4);
}
.c02-menu .head {
font-size: 15px;
font-weight: 700;
line-height: 28px;
margin-right: 0;
margin-bottom: 2px;
background: 0 0;
padding-left: 3px;
}
.c02-menu ul {
float: left;
margin-bottom: 10px;
list-style: none;
padding-left: 5px;
}
.c02-menu li {
line-height: 25px;
margin-right: 15px;
font-size: 14px;
padding-left: 5px;
}
.c02-menu a:hover {
text-decoration: underline;
}
css
$(".c02-nav .item").hover(function () {
var $offset = $(this).offset();
$(this).find(".c02-menu").css({ "top": $offset.top + 48, "left": $offset.left, "display": "block" });
}, function () {
$(this).find(".c02-menu").css("display", "none");
});
js
### 网址首页
### 个人新闻
### 民用报名
- 申请1
- 申请2
- 申请3
- 申请4
- 申请5
- 申请6
- 申请7
- 申请8
### 借债申请
- 申请1
- 申请2
- 申请3
- 申请4
- 申请5
- 申请6
- 申请7
- 申请8
### 机票申请
- 申请1
### 民用报名
### 个人报名
- 申请1
- 申请2
- 申请3
- 申请4
- 申请5
- 申请6
- 申请7
- 申请8
### 借款申请
- 申请1
- 申请2
- 申请3
- 申请4
- 申请5
- 申请6
- 申请7
- 申请8
### 机票申请
- 申请1
代码
<div class="c03-nav">
<ul class="menu ul">
<li>
<h3 class="selected"><a href="#" class="depth_1">网站首页</a></h3>
</li>
<li>
<h3 id="menu_02"><a href="#" class="depth_1">个人信息</a></h3>
<ul id="children_02" class="children">
<li>
<h3 id="menu_02a"><a href="#" class="depth_2">个人申请</a></h3>
<ul id="children_02a">
<li><a href="#" class="depth_3">申请1</a></li>
<li><a href="#" class="depth_3">申请2</a></li>
<li><a href="#" class="depth_3">申请3</a></li>
<li><a href="#" class="depth_3">申请4</a></li>
<li><a href="#" class="depth_3">申请5</a></li>
<li><a href="#" class="depth_3">申请6</a></li>
<li><a href="#" class="depth_3">申请7</a></li>
<li><a href="#" class="depth_3">申请8</a></li>
</ul>
</li>
<li>
<h3 id="menu_02b"><a href="#" class="depth_2">借款申请</a></h3>
<ul id="children_02b">
<li><a href="#" class="depth_3">申请1</a></li>
<li><a href="#" class="depth_3">申请2</a></li>
<li><a href="#" class="depth_3">申请3</a></li>
<li><a href="#" class="depth_3">申请4</a></li>
<li><a href="#" class="depth_3">申请5</a></li>
<li><a href="#" class="depth_3">申请6</a></li>
<li><a href="#" class="depth_3">申请7</a></li>
<li><a href="#" class="depth_3">申请8</a></li>
</ul>
</li>
<li>
<h3 id="menu_02c"><a href="#" class="depth_2">机票申请</a></h3>
<ul id="children_02c">
<li><a href="#" class="depth_3">申请1</a></li>
</ul>
</li>
</ul>
</li>
<li>
<h3 id="H1"><a href="#" class="depth_1">个人申请</a></h3>
<ul id="Ul1" class="children">
<li>
<h3 id="H2"><a href="#" class="depth_2">个人申请</a></h3>
<ul id="Ul2">
<li><a href="#" class="depth_3">申请1</a></li>
<li><a href="#" class="depth_3">申请2</a></li>
<li><a href="#" class="depth_3">申请3</a></li>
<li><a href="#" class="depth_3">申请4</a></li>
<li><a href="#" class="depth_3">申请5</a></li>
<li><a href="#" class="depth_3">申请6</a></li>
<li><a href="#" class="depth_3">申请7</a></li>
<li><a href="#" class="depth_3">申请8</a></li>
</ul>
</li>
<li>
<h3 id="H3"><a href="#" class="depth_2">借款申请</a></h3>
<ul id="Ul3">
<li><a href="#" class="depth_3">申请1</a></li>
<li><a href="#" class="depth_3">申请2</a></li>
<li><a href="#" class="depth_3">申请3</a></li>
<li><a href="#" class="depth_3">申请4</a></li>
<li><a href="#" class="depth_3">申请5</a></li>
<li><a href="#" class="depth_3">申请6</a></li>
<li><a href="#" class="depth_3">申请7</a></li>
<li><a href="#" class="depth_3">申请8</a></li>
</ul>
</li>
<li>
<h3 id="H4"><a href="#" class="depth_2">机票申请</a></h3>
<ul id="Ul4">
<li><a href="#" class="depth_3">申请1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
html
.c03-nav, .c03-nav h3, .c03-nav h3 a, .c03-nav li {
background: url(..sprite.gif) no-repeat scroll left -9999px;
}
.c03-nav {
height: 40px;
line-height: 40px;
background-repeat: repeat-x;
background-position: 0 0;
background-color: #C00;
width: 100%;
}
.c03-nav ul.menu li {
position: relative;
float: left;
padding: 0 5px;
background-position: 0 -40px;
list-style-type: none;
}
.c03-nav ul.menu li h3 {
padding: 0 15px 0 0;
font-size: 1.2em;
}
.c03-nav ul.menu li h3 a.depth_1 {
padding: 0 0 0 15px;
display: inline-block;
color: #FFF;
}
.c03-nav ul.menu li h3.hover, .c03-nav ul.menu li h3.selected {
background-position: right -80px;
}
.c03-nav ul.menu li h3.hover a.depth_1, .c03-nav ul.menu li h3.selected a.depth_1 {
background-position: left -80px;
color: #C00;
}
.c03-nav ul.menu li.hover h3 {
background-position: right -120px;
}
.c03-nav ul.menu li.hover h3 a.depth_1 {
background-position: left -120px;
color: #C00;
}
.c03-nav ul.menu li ul.children {
position: absolute;
left: 2px;
top: 40px;
z-index: 19;
display: none;
width: 393px;
padding: 6px 7px 5px 6px;
border: 3px solid #900;
border-top: 0;
background: #FFF;
}
.c03-nav ul.menu li ul.children li {
width: 393px;
padding: 0 0 1px 0;
background: 0 0;
}
.c03-nav ul.menu li ul.children li.nosub {
width: 130px;
overflow: hidden;
}
.c03-nav ul.menu li ul.children li h3 a.depth_2 {
width: 120px;
line-height: 25px;
display: block;
font-weight: 400;
font-size: 9pt;
color: #900;
}
.c03-nav ul.menu li ul.children li h3 a.depth_2 span.icon10 {
margin: 10px 3px 0 5px;
background-position: -60px -380px;
}
.c03-nav ul.menu li ul.children li h3.selected {
background: #FFEFEF;
}
.c03-nav ul.menu li ul.children li.hover {
z-index: 20;
}
.c03-nav ul.menu li ul.children li.hover h3 a.depth_2 {
background: #FFCFCF;
font-weight: 700;
}
.c03-nav ul.menu li ul.children li.hover ul {
background: #FFEFEF;
border-color: #FFBFBF;
height: auto;
z-index: 20;
}
.c03-nav ul.menu li ul.children li.hover ul li a.depth_3 {
color: #333;
}
.c03-nav ul.menu li ul.children li.hover ul li a.depth_3:hover {
color: #900;
}
.c03-nav ul.menu li ul.children ul {
position: absolute;
top: 0;
left: 120px;
padding: 0 0 0 10px;
width: 263px;
height: 25px;
overflow: hidden;
background: #F4F8F9;
border-left: 2px solid #D8E2EC;
}
.c03-nav ul.menu li ul.children ul li {
width: auto;
padding: 0;
float: left;
}
.c03-nav ul.menu li ul.children ul li a.depth_3 {
margin: 0 15px 0 0;
line-height: 25px;
display: block;
color: #666;
white-space: nowrap;
}
.c03-nav ul.menu li ul.children ul li a.depth_3:hover {
text-decoration: underline;
}
.c03-nav ul.menu li ul.children ul li a.selected {
background: 0 0;
color: #900;
}
css
var navstr = '';
for (c in vars = '0'.split(',')) {
$('#menu_' + vars[c]).addClass('selected');
}
$('.c03-nav ul.menu > li').hover(function () {
$(this).find('.children').show();
if ($(this).find('.children').length) $(this).addClass('hover');
}, function () {
$('.children').hide();
$(this).removeClass('hover');
});
$('.c03-nav ul.menu h3, .c03-nav ul.menu ul.children > li').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
js
- 网址首页
- 个人消息
个体申请
### 申请1
申请11 申请11 申请11 申请11 申请11 申请11 申请11
### 申请1
申请11 申请11 申请11 申请11 申请11 申请11 申请11
### 申请1
申请11 申请11 申请11 申请11 申请11 申请11 申请11
### 申请1
申请11 申请11 申请11 申请11 申请11 申请11 申请11
### 申请1
申请11 申请11 申请11 申请11 申请11 申请11 申请11
### 申请1
申请11 申请11 申请11 申请11 申请11 申请11 申请11
### 申请2
申请22 申请22 申请22 申请22 申请22 申请22 申请22
### 申请2
申请22 申请22 申请22 申请22 申请22 申请22 申请22
### 申请2
申请22 申请22 申请22 申请22 申请22 申请22 申请22
### 申请2
申请22 申请22 申请22 申请22 申请22 申请22 申请22
### 申请
申请 申请 申请 申请 申请 申请
### 申请
申请 申请 申请 申请 申请 申请
### 申请
申请 申请 申请 申请 申请 申请
### 申请
申请 申请 申请 申请 申请 申请
代码
<div class="c05-nav">
<div class="list" id="navlist">
<ul id="navfouce">
<li><a href="#">网站首页</a></li>
<li><a href="#">个人信息</a></li>
<li><a href="#">个人申请</a></li>
</ul>
</div>
<div class="box" id="navbox" style="height:0px;opacity:0;overflow:hidden;">
<div class="cont" style="display:none;">
<ul class="sublist clearfix">
<li>
<h3 class="mcate-item-hd">申请1</h3>
<p class="mcate-item-bd">
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请1</h3>
<p class="mcate-item-bd">
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请1</h3>
<p class="mcate-item-bd">
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请1</h3>
<p class="mcate-item-bd">
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请1</h3>
<p class="mcate-item-bd">
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请1</h3>
<p class="mcate-item-bd">
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
<a href="#">申请11</a>
</p>
</li>
</ul>
</div>
<div class="cont" style="display:none;">
<ul class="sublist clearfix">
<li>
<h3 class="mcate-item-hd">申请2</h3>
<p class="mcate-item-bd">
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请2</h3>
<p class="mcate-item-bd">
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请2</h3>
<p class="mcate-item-bd">
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请2</h3>
<p class="mcate-item-bd">
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
<a href="#">申请22</a>
</p>
</li>
</ul>
</div>
<div class="cont" style="display:none;">
<ul class="sublist clearfix">
<li>
<h3 class="mcate-item-hd">申请</h3>
<p class="mcate-item-bd">
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请</h3>
<p class="mcate-item-bd">
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请</h3>
<p class="mcate-item-bd">
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">申请</h3>
<p class="mcate-item-bd">
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
<a href="#">申请</a>
</p>
</li>
</ul>
</div>
</div>
</div>
html
.c05-nav {
width: 100%;
height: 41px;
background: #074C52;
}
.c05-nav .list ul {
list-style-type: none;
}
.c05-nav .list li {
float: left;
}
.c05-nav .list a {
float: left;
display: block;
width: 95px;
height: 42px;
text-align: center;
font: 700 14px/36px "微软雅黑";
color: #fff;
}
.c05-nav .list a:hover {
color: #FFA304;
}
.c05-nav .list a:hover, .nav .list .now {
color: red;
background: #fff;
}
.c05-nav .box {
z-index: 10;
position: absolute;
left: -5px;
top: 42px;
width: 1006px;
background: #FFF;
overflow: hidden;
height: 0;
filter: alpha(opacity=0);
opacity: 0;
border-bottom: 2px solid #074c52;
}
.c05-nav .cont {
position: relative;
padding: 25px 0 0 24px;
}
.sublist li {
float: left;
width: 168px;
padding-right: 24px;
padding-bottom: 24px;
}
.sublist li h3.mcate-item-hd {
font-family: '微软雅黑';
padding-left: 2px;
font-size: 14px;
height: 26px;
line-height: 26px;
border-bottom: 1px dashed #666;
}
.sublist li p.mcate-item-bd {
padding-left: 2px;
}
.sublist li p.mcate-item-bd a {
height: 26px;
line-height: 26px;
margin-right: 5px;
font-size: 12px;
color: #666;
text-decoration: none;
display: inline-block;
}
.sublist li p.mcate-item-bd a:hover {
color: #6c5143;
text-decoration: underline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
.clearfix {
height: 1%;
}
.clearfix {
display: block;
}
.clearfix {
min-height: 1%;
}
css
var time = null;
var list = $("#navlist");
var box = $("#navbox");
var lista = list.find("a");
for (var i = 0, j = lista.length; i < j; i++) {
if (lista[i].className == "now") {
var olda = i;
}
}
var box_show = function (hei) {
box.stop().animate({
height: hei,
opacity: 1
}, 400);
}
var box_hide = function () {
box.stop().animate({
height: 0,
opacity: 0
}, 400);
}
lista.hover(function () {
lista.removeClass("now");
$(this).addClass("now");
clearTimeout(time);
var index = list.find("a").index($(this));
box.find(".cont").hide().eq(index).show();
var _top = $(this).offset().top + $(this).height();
var _height = box.find(".cont").eq(index).height();
$("#navbox").css("top", _top);
box_show(_height)
}, function () {
time = setTimeout(function () {
box.find(".cont").hide();
box_hide();
}, 50);
lista.removeClass("now");
lista.eq(olda).addClass("now");
});
box.find(".cont").hover(function () {
var _index = box.find(".cont").index($(this));
lista.removeClass("now");
lista.eq(_index).addClass("now");
clearTimeout(time);
$(this).show();
var _height = $(this).height() + 54;
box_show(_height);
}, function () {
time = setTimeout(function () {
$(this).hide();
box_hide();
}, 50);
lista.removeClass("now");
lista.eq(olda).addClass("now");
});
js
- 网址首页
个人消息
住房申请 借款申请 机票申请 其他 申请1 申请1 申请1 申请1 申请2 申请2 申请2 申请2 申请3 申请3 申请3 申请3 申请4 申请4 申请4 申请4 申请5 申请5 申请5 申请5 申请6 其他... 申请6 村办报名
住房申请 借款申请 申请1 申请1 申请2
代码
<div class="c04-nav" style="clear:both;">
<ul>
<li class="nav-item" id="c04-home"><a href="#" class="nav-item-link">网站首页</a></li>
<li class="nav-item" id="personal">
<a href="#" class="nav-item-link">个人信息</a>
<div class="nav-item-sub sl-shadow">
<table class="nav-item-table">
<thead>
<tr>
<th>住房申请</th>
<th>借款申请</th>
<th>机票申请</th>
<th class="last">其他</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">申请1</a></td>
<td><a href="#">申请1</a></td>
<td><a href="#">申请1</a></td>
<td class="last"><a href="#">申请1</a></td>
</tr>
<tr>
<td><a href="#">申请2</a></td>
<td><a href="#">申请2</a></td>
<td><a href="#">申请2</a></td>
<td class="last"><a href="#">申请2</a></td>
</tr>
<tr>
<td><a href="#">申请3</a></td>
<td><a href="#">申请3</a></td>
<td><a href="#">申请3</a></td>
<td class="last"><a href="#">申请3</a></td>
</tr>
<tr>
<td><a href="#">申请4</a></td>
<td><a href="#">申请4</a></td>
<td><a href="#">申请4</a></td>
<td class="last"><a href="#">申请4</a></td>
</tr>
<tr>
<td><a href="#">申请5</a></td>
<td><a href="#">申请5</a></td>
<td><a href="#">申请5</a></td>
<td class="last"><a href="#">申请5</a></td>
</tr>
<tr>
<td><a href="#">申请6</a></td>
<td><a href="#">其他...</a></td>
<td></td>
<td class="last"><a href="#">申请6</a></td>
</tr>
</tbody>
</table>
</div>
<div class="angle sl-angle"></div>
</li>
<li class="nav-item" id="payment">
<a href="#" class="nav-item-link">个人申请</a>
<div class="nav-item-sub sl-shadow">
<table class="nav-item-table">
<thead>
<tr>
<th>住房申请</th>
<th class="last">借款申请</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">申请1</a></td>
<td class="last"><a href="#">申请1</a></td>
</tr>
<tr>
<td><a href="#">申请2</a></td>
</tr>
</tbody>
</table>
</div>
<div class="angle sl-angle"></div>
</li>
</ul>
</div>
html
.c04-nav {
width: 100%;
height: 45px;
z-index: 999;
background-color: #fff;
}
.nav-item {
float: left;
height: 45px;
position: relative;
list-style-type: none;
background-color: #fff;
}
.nav-item .nav-item-link {
height: 45px;
display: block;
overflow: hidden;
line-height: 45px;
font-size: 15px;
text-align: center;
}
.nav-item .nav-item-link, .nav-item .nav-item-link-active, .nav-item .nav-item-link:hover {
background-repeat: no-repeat;
}
.nav-item-sub {
position: absolute;
padding: 12px 3px;
background: #fff;
top: 45px;
}
.nav-item-table {
background: none repeat scroll 0 0 #fff;
white-space: nowrap;
}
.nav-item-table td, .nav-item-table th {
border-right: 1px solid #e7e7e7;
padding: 3px 16px;
white-space: nowrap;
}
.nav-item-table th {
font-weight: 700;
padding: 0 14px 3px 17px;
border-collapse: separate;
white-space: nowrap;
}
.nav-item-table td.last, .nav-item-table th.last {
border-right: 0;
}
.nav-item-table a {
color: #a0a0a0;
display: block;
padding-left: 3px;
position: relative;
vertical-align: middle;
}
.nav-item-table a:hover {
background-color: #aaa;
border-radius: 2px 2px 2px 2px;
color: #fff;
text-decoration: none;
vertical-align: middle;
}
.nav-item .nav-item-sub {
display: none;
z-index: 10;
}
.nav-item .angle {
position: absolute;
display: none;
width: 15px;
height: 15px;
font-size: 0;
top: 35px;
right: 65px;
}
:root .angle {
top: 35px;
z-index: 10;
}
.nav-item-hover .nav-item-sub, .nav-item:hover .nav-item-sub {
display: block;
}
.nav-item-hover .angle, .nav-item:hover .angle {
display: block;
}
#c04-home .nav-item-link {
width: 90px;
}
#personal .nav-item-link {
width: 110px;
}
#personal .nav-item-sub {
left: -44px;
}
#payment .nav-item-link {
width: 110px;
background-position: -221px -14px;
margin-right: 20px;
}
#payment .nav-item-link-active, #payment .nav-item-link:hover {
background-position: -251px -75px;
}
#payment .nav-item-sub {
left: -83px;
}
.sl-shadow {
-moz-box-shadow: 0 0 4px #999;
-o-box-shadow: 0 0 4px #999;
-webkit-box-shadow: 0 0 4px #999;
box-shadow: 0 0 4px #999;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#a0a0a0,strength=0) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=0,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=90,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=180,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=270,strength=2)";
}
.sl-angle {
background-image: url(..MxQutehzH.png);
}
.sl-angle {
background-repeat: no-repeat;
background-position: -385px -11px;
overflow: hidden;
}
css
(function(a, b) {
function r(a) {
var b = -1;
while (++b < f) a.createElement(e[b])
}
if (!(!window.attachEvent || !b.createStyleSheet || !
function() {
var a = document.createElement("div");
a.innerHTML = "<elem></elem>";
return a.childNodes.length !== 1
}())) {
a.iepp = a.iepp || {};
var c = a.iepp,
d = c.html5elements || "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
e = d.split("|"),
f = e.length,
g = new RegExp("(^|\s)(" + d + ")", "gi"),
h = new RegExp("<(/*)(" + d + ")", "gi"),
i = /^s*[{}]s*$/,
j = new RegExp("(^|[^\n]*?\s)(" + d + ")([^\n]*)({[\n\w\W]*?})", "gi"),
k = b.createDocumentFragment(),
l = b.documentElement,
m = l.firstChild,
n = b.createElement("body"),
o = b.createElement("style"),
p = /print|all/,
q;
c.getCSS = function(a, b) {
if (a + "" === undefined) return "";
var d = -1,
e = a.length,
f, g = [];
while (++d < e) {
f = a[d];
if (f.disabled) continue;
b = f.media || b, p.test(b) && g.push(c.getCSS(f.imports, b), f.cssText), b = "all"
}
return g.join("")
}, c.parseCSS = function(a) {
var b = [],
c;
while ((c = j.exec(a)) != null) b.push(((i.exec(c[1]) ? "n" : c[1]) + c[2] + c[3]).replace(g, "$1.iepp_$2") + c[4]);
return b.join("n")
}, c.writeHTML = function() {
var a = -1;
q = q || b.body;
while (++a < f) {
var c = b.getElementsByTagName(e[a]),
d = c.length,
g = -1;
while (++g < d) c[g].className.indexOf("iepp_") < 0 && (c[g].className += " iepp_" + e[a])
}
k.appendChild(q), l.appendChild(n), n.className = q.className, n.id = q.id, n.innerHTML = q.innerHTML.replace(h, "<$1font")
}, c._beforePrint = function() {
o.styleSheet.cssText = c.parseCSS(c.getCSS(b.styleSheets, "all")), c.writeHTML()
}, c.restoreHTML = function() {
n.innerHTML = "", l.removeChild(n), l.appendChild(q)
}, c._afterPrint = function() {
c.restoreHTML(), o.styleSheet.cssText = ""
}, r(b), r(k);
if (c.disablePP) return;
m.insertBefore(o, m.firstChild), o.media = "print", o.className = "iepp-printshim", a.attachEvent("onbeforeprint", c._beforePrint), a.attachEvent("onafterprint", c._afterPrint)
}
})(this, document)
js
假如不全或不当能够在 查看完整demo,未有的能源记得右键源代码