纯CSS实现下拉菜单

之前，实现下拉菜单，总是使用js监听mouseover、mouseout事件。

这两天复习css，发现使用css实现下拉菜单，更简单，更方便。到现在才发现，真是尴尬啊……

这个功能的关键点，其实就是鼠标移入父菜单项时，显示子菜单列表；鼠标移出父菜单项时，隐藏子菜单列表。

使用下面的代码即可：

.children-menu {
    display: none;
}

.parent-menu-item:hover .children-menu {
    display: block;
}