美图秀秀网站二级导航菜单特效

一款非常实用的导航菜单特效，是浏览美图秀秀网站的时候觉得它好看就把它整理出来了，第一时间与大家分享，是用纯css样式代码实现的，没有任何的javascript和jquery代码参与，大家可以好好利用哦，举一反三。。。

核心样式代码如下：
view sourceprint?
01
MT_nav ul .MT-item:hover div {
02
    display:block;
03
}
04
#MT_nav ul .MT-first {
05
    background-position:0 0;
06
}
07
#MT_nav ul .MT-last {
08
    background-position:-43px 0;
09
}
10
#MT_nav ul .MT-bg {
11
    background-position:-245px 0;
12
}
13
#MT_nav ul .MT-item a {
14
    color:#646464;
15
    display:block;
16
    font-size:14px;
17
    height:47px;
18
    line-height:47px;
19
    _line-height:50px;
20
    text-align:center;
21
    text-decoration:none;
22
}
23
#MT_nav ul .MT-item a:hover {
24
    color:#ff5d71;
25
}
26
#MT_nav ul .MT-current .MT-bg {
27
    font-weight:bold;
28
    font-size:16px;
29
    color:#ff5069;
30
}
31
#MT_nav ul .MT-item a .MT-more {
32
    -webkit-text-size-adjust:none;
33
    font-size:0;
34
    height:0;
35
    width:0;
36
    padding:2px 4px;
37
    background-position:-24px -65px;
38
    position:relative;
39
    top:-4px;
40
    left:6px;
41
    z-index:99;
42
    _margin-top:22px;
43
    _top:0px;
44
    *zoom:1;
45
}
46
#MT_nav ul .MT-item div {
47
    display:none;
48
    background-color:#fff;
49
    border:1px solid #ccc;
50
    border-radius:5px;
51
    position:absolute;
52
    top:42px;
53
    left:50%;
54
    margin-left:-49%;
55
    -webkit-box-shadow:0 0 4px rgba(0,0,0,.02),0 2px 5px rgba(0,0,0,.1);
56
    -moz-box-shadow:0 0 4px rgba(0,0,0,.02),0 2px 5px rgba(0,0,0,.1);
57
    box-shadow:0 0 4px rgba(0,0,0,.02),0 2px 5px rgba(0,0,0,.1);
58
    width:98%;
59
}
60
#MT_nav .MT-arrow {
61
    display:block;
62
    font-size:0;
63
    height:7px;
64
    position:absolute;
65
    top:-7px;
66
    width:14px;
67
    margin-left:-7px;
68
    left:50%;
69
    background-position:0 -63px;
70
}
71
#MT_nav ul .MT-list div {
72
    display:block;
73
}