JavaScript实现HTML导航栏下拉菜单

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

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

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";
   }
 }

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

  
  
  
  
  


  

    
Gorho
    

      
选项一
      
选项二
      
选项三