javascript - 试图制作一个 onmouseover javascript 下拉菜单

Question

Effect I want .基本上我想在用户鼠标悬停在链接上时弹出一个简单的菜单。 我尝试了几个现成的脚本，但无法将它们与我的站点集成。所以决定建立我自己的。 这是我正在尝试做的事情:

   <li onmouseover=showlist1() onmouseout=hidelist1() ><a class="navigation"  href="show_delhi_items.php">Menu heading</a></li>

 function showlist1() //onmouseover
  {
     
      document.getElementById('list1').style.visibility='visible' ;
     
  }
  function hidelist1() //onmouseout
  {
      if (menu elements don't have focus)
      {
      document.getElementById('list1').style.visibility='hidden' ;
      }
  }
  

现在我该如何实现“菜单元素没有焦点”部分？我知道不可能知道哪个元素具有焦点。所以我需要一个替代方案。基本上问题在于，一旦鼠标移出主链接(弹出隐藏菜单的链接)，菜单就会隐藏。我想要的是菜单在获得焦点时保持可见。但目前一旦鼠标移出我们的主链接，它就会被隐藏

希望我说得足够清楚。

Answer 1

使菜单与具有 onmouseover 菜单的列表项重叠。然后仅当鼠标位于列表项和菜单之外时才关闭菜单。你将不得不使用:

position: absolute;
top: some-y-value;
left: some-x-value;