css下拉菜单离开消失了

CSS下拉菜单是网页常用的交互方式，但是有时候我们会遇到下拉菜单离开后却没有消失的问题。

这种情况通常是由于选用了错误的CSS选择器造成的。在下拉菜单的CSS代码中，我们需要通过:hover选择器来定义当鼠标悬浮在菜单上时的样式，如下：

.dropdown:hover .dropdown-menu {
  display: block;
} 

这里的.dropdown:hover表示只有当鼠标悬浮在.dropdown元素上时，才会对其后代元素.dropdown-menu生效，使其显示出来。但是，如果我们在.dropdown-menu元素的样式代码里也使用了:hover选择器，导致在菜单上滑动鼠标时并不能使菜单消失，代码如下：

.dropdown-menu:hover {
  display: block;
} 

为了解决这个问题，我们只需要去掉.dropdown-menu:hover的CSS代码，或者将其改成其他选择器，如下：

.dropdown-menu.visible {
  display: block;
} 

这样当我们需要在JavaScript中操作下拉菜单时，只需要添加/删除.visible类名即可控制下拉菜单的显隐。