css中如何实现导航栏横向,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:

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

效果图如下所示：