纯css 二级下拉菜单

<!--二级菜单栏-->
<div id="menu">
<button class="btnMenu" id="btnOne">编程语言</button>
<div class="menu-content" id="mc1">
<a href="#">.net</a>
<a href="#">java</a>
<a href="#">php</a>
<a href="#">c++</a>
</div>
</div>

<div id="menu1">
<button class="btnMenu" id="btnTwo">国家语言</button>
<div class="menu-content" id="mc2">
<a href="#">普通话</a>
<a href="#">英语</a>
<a href="#">法语</a>
</div>
</div>

<div id="menu2">
<button class="btnMenu" id="btnThree">乐器</button>
<div class="menu-content" id="mc3">
<a href="#">吉他</a>
<a href="#">钢琴</a>
<a href="#">古筝</a>
<a href="#">二弦</a>
</div>
</div>

<div id="menu3">
<button class="btnMenu" id="btnFour">编程职业</button>
<div class="menu-content" id="mc4">
<a href="#">前端开发</a>
<a href="#">后台开发</a>
<a href="#">android开发</a>
<a href="#">测试员</a>
<a href="#">销售</a>
</div>
</div>

<div id="menu4">
<button class="btnMenu" id="btnFive">熟练程度</button>
<div class="menu-content" id="mc5">
<a href="#">一般</a>
<a href="#">熟练</a>
<a href="#">精通</a>
</div>
</div>
#menu,#menu1,#menu2,#menu3,#menu4{
	display:inline-block;
	position:relative;
}
.btnMenu{
	width:100px;
	height:50px;
	border-radius:5px 5px 0 0;
	background-color:#F9F;
	color:#fff;
	border:none;	
	margin:10px;
}
.menu-content{
	position:absolute;
	min-width:160px;
	background-color:#FCF;
	box-shadow:0 2px 5px rgba(0,0,0,0.2);
	margin-top:-10px;
		display:none;
		margin-left:10px;
}
.menu-content a{
	color:#F0F;
	padding:12px 16px;
	text-decoration:none;
	display:block;
}
#mc1 a:hover,#mc2 a:hover,#mc3 a:hover,#mc4 a:hover,#mc5 a:hover{
	background-color:#F9F;
	color:#fff;	
}
#menu:hover #mc1,#menu1:hover #mc2,#menu2:hover #mc3,#menu3:hover #mc4,#menu4:hover #mc5{
	display:block;
}
#menu:hover #btnOne,#menu1:hover #btnTwo,#menu2:hover #btnThree,#menu3:hover #btnFour,#menu4:hover #btnFive{
	background-color:#FCF;
}

/*仅供学习参考，欢迎指教*/