Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	list-style-type:none;
}
.nav {
	width:90%;
	height:36px;
	line-height:36px;
	font-size:14px;
	color:#fff;
	margin:0 auto;
	position:relative;
	background:#643560;
}
.nav > .nav-main {
	width:100%;
	position:relative;
}
.nav > .nav-main span {
	position:absolute;
	top:16px;
	left:;
	margin-left:10px;
	width:7px;
	height:7px;
	background:url('../img/down-icon.png') no-repeat;
	*/
}
.nav > .nav-main >li {
	width:16.6%;
	text-align:center;
	float:left;
	position:relative;
	cursor:pointer;
}
.nav > .nav-main >li>.hidden-box {
	position:absolute;
	border:1px solid #643580;
	color:#000;
	top:100%;
	left:50%;
	display:none;
	cursor:pointer;
}
.nav > .nav-main >li>.hidden-box li:hover {
	background:#643580;
	color:#fff;
}
.nav > .nav-main >li>.hidden-loc-index {
	margin-left:-30px;
}
.nav > .nav-main >li>.hidden-loc-us {
	margin-left:-30px;
}
.nav > .nav-main >li>.hidden-loc-info {
	margin-left:-37px;
}
.nav > .nav-main >li>.box04 {
	margin-left:-30px;
}
.nav > .nav-main >li>.hidden-box>ul>li {
	text-align:center;
}
/*图标向上旋转*/
.hover-up {
	transition-duration:.5s;
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
}
/*图标向下旋转*/
.hover-down {
	transition-duration:.5s;
	transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
}

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

tab导航栏的切换

自适应导航栏,PC端和移动端可共用的导航栏

0