Html
    Css
    Js
 body {
	margin:0px;
	padding:0px;
	font-family:Verdana,Geneva,sans-serif;
	font-size:12px;
	color:#FFF;
	background-color:#434343
}
body a {
	color:#000000;
}
.box {
	padding:0px;
	width:2000px;
}
.box ul {
	margin:0px;
	padding:0px;
	list-style:none;
	border:0;
}
.box ul li {
	float:left;
	position:relative;
	padding:0px;
	display:block;
	border-radius:0px;
	box-shadow:#000 0px 0px 1px;
	border:0;
	background-color:#F3F3F3;
}
.box ul li:hover ul {
	display:block;
}
.box ul li a {
	font-size:14px;
	padding:5px;
	display:block;
	text-decoration:none;
	border-right:1px solid #999;
}
.box ul li ul {
	display:none;
	position:absolute;
	left:0px;
}
.box ul li ul li {
	width:120px;
	margin:0px 0px 2px 0px;
	padding:0px;
	background-color:#ddd;
}
.box>ul>li:hover {
	background-color:#1E90FF;
}
.box ul li ul li:hover {
	background:pink;
}
.box ul li ul li:hover ul {
	visibility:visible;
}
.box ul li ul li ul {
	visibility:hidden;
	position:absolute;
	top:0px;
	left:121px;
}
.box ul li ul li ul li {
	background:#FFFFFF;
}
.box ul li ul li ul li:hover {
	background:#AFEEEE;
}

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

css三级菜单导航

0