Html
    Css
    Js

    
                        
 * {
	padding:0;
	margin:0;
	background:#333;
}
ul,li {
	list-style:none;
}
ul {
	width:850px;
	zoom:1;
	position:relative;
	margin:50px auto 0;
}
li {
	width:170px;
	height:30px;
	line-height:30px;
	color:#ffffff;
	text-align:center;
	float:left;
	background:#2d8cf0;
	opacity:0.8;
}
ul:after {
	display:block;
	content:"";
	clear:both;
	visibility:hidden;
	height:0;
	transition:.5s;
}
i {
	width:170px;
	height:2px;
	content:"";
	background:#ffad33;
	position:absolute;
	bottom:0;
	left:0;
	z-index:9;
	transition:.5s;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

导航栏鼠标悬停css+jq

首先考虑到代码精简以及SEO,所以HTML页面,只运用了"ul"标签。效果的兼容性可以到ie9,如果不考虑滑动的话,ie8也没有问题。HTML中有个样式名“active”,是方便在不同页面有个默认样式。

0