Html
    Css
    Js
body {
	margin:0px;
}
.hovertreenav  ul,li,a {
	margin:0px;
	padding:0px;
	font-size:20px;
	border:0;
	color:white
}
.hovertreenav {
	margin-top:50px;
	width:100%;
	min-width:870px;
	background-color:#01204F;
	color:white
}
.div-nav {
	/*作为div-hover的父元素定位参照*/
            position:relative;
	width:870px;
	margin:0px auto;
}
.div-hover {
	background-color:Red;
	/*以父元素绝对定位*/
            position:absolute;
	height:50px;
	left:0px;
	top:0px;
	width:0px;
}
ul {
	list-style:outside none none;
	width:100%;
	height:50px;
}
ul li {
	float:left;
	/*****Start(作用:导航文字浮于div-hover红色之上)*******/
                position:relative;
	z-index:4;
	/*********************End*************************/
}
ul li a {
	line-height:50px;
	display:block;
	padding:0px 15px;
	text-align:center;
	text-decoration:none;
}
/**设置菜单激活***/
        .active {
	background-color:Red;
}

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

导航焦点滑动效果

特别简洁的导航焦点固定代码。

0