【CSS】纯CSS另类思路代替display、visibility解决子菜单延迟消失

  在设计子菜单时候，需要实现当鼠标移动到菜单时候，子菜单显示，否则子菜单都处于隐藏状态。实现这个功能使用js的话很简单实现，但是我想用纯CSS，使用纯CSS的话，就会遇到鼠标移开菜单后，子菜单就马上消失了（display：noe或者visibility：hidden），就鼠标还没移动到子菜单部分，子菜单就消失了，无法操作到子菜单。如下图的：当鼠标移动到A时候，B子菜单出现，且B子菜单有足够的显示时间让用户鼠标移动到B子菜单。

  

   网上搜索了一遍，都是说用transition-delay......来实现延迟、动态效果，但是我觉得用这个来解决这个问题不太恰当。此时我想到了应该尝试用opacity来延迟隐藏/显示它。具体代码：

  A{

    opacity: 0; 
    transition: 0.5s; 

}

 A:hover+B{             //A、B为相邻同级元素   A:hover后操作B的opacity

    opacity: 1; 

}

B:hover{

    opacity: 1; 

}

   完成。