代码实现（JavaScript）

1、获取要悬浮的对象和菜单对象

//获取需要悬浮的对象
  let show = document.getElementById("show");
  //获取被隐藏的菜单
  let menu = document.getElementById("menu");

2、对悬浮对象添加鼠标悬浮事件

//给show添加鼠标悬浮事件
  show.onmouseover = function(){
     //改变菜单的内联样式display为block，菜单显示
     menu.style.display = "block";
  }

3、对悬浮对象添加鼠标离开事件

如果先触发了悬浮对象show的鼠标悬浮事件，不移动到菜单menu上就鼠标就离开了，会出现菜单无法隐藏的bug！所以在悬浮对象的鼠标离开事件中，我们需要进行判断，如果鼠标移开后的位置不在菜单menu的范围内，则令菜单menu隐藏，否则就继续显示

show.onmouseout = function(){
   //获取菜单栏的坐标值
   let menux = menu.offsetLeft;
   let menuy = menu.offsetTop;
   let menuX = menu.offsetLeft+menu.offsetWidth;
   let menuY = menu.offsetTop+menu.offsetHeight;

   //获取鼠标的坐标值
   let event = window.event;
   let mouseX = event.clientX;
   let mouseY = event.clientY;

   if(mouseXmenuX || mouseYmenuY){
     menu.style.display = "none";
   }
 }

4、分别给菜单menu添加鼠标悬浮和离开事件

这里见码之意，假如鼠标在menu上就显示，离开了就隐藏

//分别给menu对象绑定鼠标悬浮和鼠标离开事件
menu.onmouseover = function(){
   menu.style.display = "block";
}
menu.onmouseleave = function(){
   menu.style.display = "none";
}

源代码：

  
  
  
  
  


  

    
Gorho
    

      
选项一
      
选项二
      
选项三