此作品是一款非常实用的导航菜单特效，是浏览美图秀秀网站的时候觉得它好看就把它整理出来了，第一时间与大家分享，是用纯css样式代码实现的，没有任何的javascript和jquery代码参与，大家可以好好利用哦，举一反三。。。
核心样式代码如下：
MT_nav ul .MT-item:hover div {
display:block;
}
#MT_nav ul .MT-first {
background-position:0 0;
}
#MT_nav ul .MT-last {
background-position:-43px 0;
}
#MT_nav ul .MT-bg {
background-position:-245px 0;
}
#MT_nav ul .MT-item a {
color:#646464;
display:block;
font-size:14px;
height:47px;
line-height:47px;
_line-height:50px;
text-align:center;
text-decoration:none;
}
#MT_nav ul .MT-item a:hover {
color:#ff5d71;
}
#MT_nav ul .MT-current .MT-bg {
font-weight:bold;
font-size:16px;
color:#ff5069;
}
#MT_nav ul .MT-item a .MT-more {
-webkit-text-size-adjust:none;
font-size:0;
height:0;
width:0;
padding:2px 4px;
background-position:-24px -65px;
position:relative;
top:-4px;
left:6px;
z-index:99;
_margin-top:22px;
_top:0px;
*zoom:1;
}
#MT_nav ul .MT-item div {
display:none;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
position:absolute;
top:42px;
left:50%;
margin-left:-49%;
-webkit-box-shadow:0 0 4px rgba(0,0,0,.02),0 2px 5px rgba(0,0,0,.1);
-moz-box-shadow:0 0 4px rgba(0,0,0,.02),0 2px 5px rgba(0,0,0,.1);
box-shadow:0 0 4px rgba(0,0,0,.02),0 2px 5px rgba(0,0,0,.1);
width:98%;
}
#MT_nav .MT-arrow {
display:block;
font-size:0;
height:7px;
position:absolute;
top:-7px;
width:14px;
margin-left:-7px;
left:50%;
background-position:0 -63px;
}
#MT_nav ul .MT-list div {
display:block;
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
美图秀秀 导航菜单 二级菜单 弹出层