纯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;
}

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