Html
    Css
    Js

    
                        
/*去掉默认样式*/
* {
	margin:0;
	padding:0;
	font-family:'微软雅黑';
}
ul li {
	list-style:none;
}
a {
	text-decoration:none;
}
.box {
	width:100%;
	height:540px;
	background:#67CBD1;
	margin-top:300px;
}
/*最大的盒子*/  

			.box1 {
	width:70%;
	height:360px;
	margin:auto;
	position:relative;
}
/*中间的盒子*/ 

			.hide-t {
	width:800px;
	height:540px;
	background:rgba(204,204,204,.3);
	position:absolute;
	top:60px;
	left:265px;
}
/* 隐藏部分的通用样式  */

				/*隐藏开始*/
			.hide1 {
	display:none;
}
.hide2 {
	display:none;
}
.hide3 {
	display:none;
}
.hide4 {
	display:none;
}
.hide5 {
	display:none;
}
.hide6 {
	display:none;
}
/*隐藏结束*/

			.hide-1 span {
	width:150px;
	color:#fd5501;
	font-size:19px;
	display:inline-block;
	margin:45px 0 0 25px;
}
.box3-2 .hide-1 a {
	font-size:17px;
	color:#fff;
	display:inline-block;
	margin-left:20px;
	padding-bottom:5px;
	border-bottom:1px solid #eef3f2;
}
.box3-2 .hide2 a {
	color:#000;
}
.box3-2 .hide3 a {
	color:#ffff00;
}
.box3-2 .hide4 a {
	color:#666;
}
.box3-2 .hide5 a {
	color:#6600ff;
}
.box3-2 .hide6 a {
	color:#006600;
}
.box3-2 .hide-1 a:hover {
	transition:.1s;
	transform:scale(1.3,1.3);
	color:#660;
	border-bottom-color:#660;
}
/*鼠标放上去字体变颜色且变大过渡时间0.1秒*/ 

						/*显示开始*/
			.box2 .show1:hover .hide1 {
	display:block;
}
.box2 .show2:hover .hide2 {
	display:block;
}
.box2 .show3:hover .hide3 {
	display:block;
}
.box2 .show4:hover .hide4 {
	display:block;
}
.box2 .show5:hover .hide5 {
	display:block;
}
.box2 .show6:hover .hide6 {
	display:block;
}
/*显示结束*/

						/*鼠标滑过加背景颜色*/
			.show1:hover {
	background:rgba(255,255,255,.2);
}
.show2:hover {
	background:rgba(255,255,255,.2);
}
.show3:hover {
	background:rgba(255,255,255,.2);
}
.show4:hover {
	background:rgba(255,255,255,.2);
}
.show5:hover {
	background:rgba(255,255,255,.2);
}
.show6:hover {
	background:rgba(255,255,255,.2);
}
.box2 {
	width:265px;
	height:599px;
	background:rgba(24,142,238,.8);
	position:absolute;
	top:-60px;
}
/*全部课程大盒子*/

			.box2-1 {
	height:60px;
	width:265px;
	color:#fff;
	font-size:20px;
	line-height:60px;
	padding-left:40px;
}
/*全部课程文字*/ 
			
			.box3 {
	width:265px;
	height:89px;
	border-bottom:1px solid #1681C4;
}
/*中间的单独导航小块*/ 
			
						/*全部课程下的导航文字样式开始*/
			.box3-1 {
	color:#fff;
	font-size:20px;
	display:inline-block;
	padding:10px 0 0 15px;
}
.box3-1t {
	color:#e9e9e9;
	padding-left:120px;
}
/*设置" > "的样式 */
			.box3-2 {
	margin-top:15px;
}
.box3-2 .nav {
	padding-left:15px;
	color:#d2d8d7;
}
/*全部课程下的导航文字样式结束*/

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

css仿腾讯课堂导航栏

0