第一种：带下划线式
html:
css3样式：
.title ul{
list-style-type: none;
padding: 0px;
float: left;
position: relative;
}
.title ul li {
width: 110px;
height: 56px;
text-align: center;
float: left; }
.title ul li a { color: #848789;
text-decoration: none;
line-height: 56px; }
.title ul a:hover{ color: #0ab2d2; }
.title .move{ height: 4px;
width: 110px;
border-top: 4px solid #0ab2d2;/*只需要将上边显示出来*/
position: absolute;
left: 0;
top: 52px;
transition: left .2s ease-in-out 0s;/*包含四个过度属性：执行变换属性、执行时间、速率、延迟*/
-webkit-transition: left .2s ease-in-out 0s;/*chrome和safari*/
-moz-transition: left .2s ease-in-out 0s;/*firefox*/
-o-transition: left .2s ease-in-out 0s;/*opera*/ }
li:nth-child(1):hover~ .move{ /*li元素的父元素的第一个子元素，当鼠标停留其上时，move元素的left属性改变*/
left: 0px; }
li:nth-child(2):hover~ .move{ left: 110px; }
li:nth-child(3):hover~ .move{ left: 220px; }
效果图如下：
第二种，上翻横向导航栏
html:
css3:
.menu{margin: 0px;background-color: seagreen;width:1350px;height: 35px; opacity: 0.8;}
.menu ul li{float:left;width:100px;height:35px;background-color: cadetblue;opacity:0.7;
margin-right:30px;margin-left:30px;line-height: 35px;position: relative;overflow: hidden;}
.menu ul li a{display: block;height: 35px;width:100px;text-align: center;line-height:35px;color:white;}
.menu ul li .wrap{position: absolute;top:0;left: 0;}
.menu ul li .wrap:hover{transition: all .3s ease-in;top:-35px;}
效果图如下所示：
