javascript - CSS JS 下拉菜单 : Extend the hover area beyond the image link

Question

我正在尝试复制在 www.accenture.com 中看到的导航

这是我到目前为止能够实现的:http://alfadesigntech.com/new/pages/inside-page-template.html

我使用了一个 java 脚本来显示/隐藏一个下拉菜单，它实际上是一个带有更多链接的隐藏 div。问题是一旦我离开菜单按钮，下拉菜单就会再次隐藏。虽然我可以使用延迟 onmouseout，但这不是我正在寻找的解决方案。

根据我有限的知识，可能的解决方案是以某种方式扩展悬停区域以覆盖隐藏框。我怎样才能做到这一点？有替代解决方案吗？

任何帮助将不胜感激..提前致谢..

附言。我对 javascript 的了解有限。

Answer 1

您可以将带有链接的 div 放在一个带有触发 anchor 的容器中 - 这应该会有所帮助。

 <div id="menu-item-1" onmouseover=....>
   <img/>
   <div class="links">Show us on mouseover and hide on mouseout</div>
 </div>

虽然它通常取决于特定的标记。

还有一种可能的解决方案 - 当链接面板打开时 - 如果鼠标移出它并且鼠标不在 anchor 图像上，则将其隐藏。