第一种:带下划线式
html:
<div class="title"> <ul> <li><a href="#">资讯</a></li> <li><a href="#">招聘</a></li> <li><a href="#">开源项目</a></li> <li class="move"> </li> </ul> </div>
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:
<div class="menu"> <ul> <li> <div class="wrap"> <a href="index.html"><i class="a">Home</i></a> <a href="index.html">首页</a> </div> </li> <li> <div class="wrap"> <a href="Knowledge.html"><i class="b">Knowledge</i></a> <a href="Knowledge.html">知识总结</a> </div> </li> <li> <div class="wrap"> <a href="Skill.html"><i class="c">Skill</i></a> <a href="Skill.html">技术归档</a> </div> </li> <li> <div class="wrap"> <a href="Diary.html"><i class="d">Diary</i></a> <a href="Diary.html">每日一记</a> </div> </li> <li> <div class="wrap"> <a href="Live.html"><i class="e">Live</i></a> <a href="Live.html">慢生活</a> </div> </li> <li> <div class="wrap"> <a href="About.html"><i class="f">About</i></a> <a href="About.html">关于自己</a> </div> </li> <li> <div class="wrap"> <a href="Message.html"><i class="g">Message</i></a> <a href="Message.html">留言</a> </div> </li> </ul></div>
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;}
效果图如下所示: