css横向导航栏

第一种：带下划线式

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:

    

        

            

                Home
                首页
            
        
        

            


                Knowledge
                知识总结
            
        
        

            

                Skill
                技术归档
            
        
        

            

                Diary
                每日一记
            
        
        

            


                Live
                慢生活
            
        
        

            

                About
                关于自己
            
        
        

            

                Message
                留言
            
        
    

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;}

效果图如下所示：