如何让CSS下拉菜单在鼠标hover时保持可见不消失？

问题原因 #

你的CSS选择器仅为.link元素的hover状态绑定了下拉菜单显示逻辑，但下拉菜单本身不属于.link的子元素，鼠标从.link移到下拉菜单时，.link的hover状态就会失效，导致下拉菜单立刻隐藏。

解决方法 #

将hover伪类绑定到同时包裹.link和.dropdown-menu的父容器.dropdown上即可，修改后的CSS选择器如下：

.dropdown:hover > .dropdown-menu

注意事项 #

• 确认.dropdown父容器没有设置会导致.link和.dropdown-menu之间出现空隙的外边距，否则鼠标移动经过空隙时仍会触发hover失效
• 可给.dropdown-menu添加pointer-events: auto属性，避免鼠标交互被上层元素拦截

内容的提问来源于stack exchange，提问作者ApplePieGuy99