Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	color:white;
	outline:none;
}
ul {
	font-size:0;
}
ul,li {
	list-style:none;
}
.box {
	font-size:14px;
	width:100%;
}
.one li {
	font-size:14px;
	width:20%;
	line-height:60px;
	margin:0 auto;
	text-align:center;
	display:inline-block;
	background-color:#FFA500;
}
.one li:hover {
	background-color:#6B8E23;
	color:#FFA500;
}
#box .two {
	color:#000;
	width:20%;
	line-height:60px;
	text-align:center;
	font-size:0px;
	position:absolute;
	display:none;
}
#box .two li {
	width:100%;
}
#box .two li:hover {
	background-color:gold;
	color:#fff;
}
#box .one {
	position:relative;
}
#box .two2 {
	left:20%;
}
#box .two3 {
	left:40%;
}
#box .two4 {
	left:60%;
}
#box .two5 {
	left:80%;
}
#box .one .one_1:hover .two1 {
	display:block;
}
#box .one .one_2:hover .two2 {
	display:block;
}
#box .one .one_3:hover .two3 {
	display:block;
}
#box .one .one_4:hover .two4 {
	display:block;
}
#box .one .one_5:hover .two5 {
	display:block;
}

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

css二级菜单

0