CSS JS 下拉菜单：将悬停区域扩展到图像链接之外

Question

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

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

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

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

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

。我对 javascript 的了解有限。

Answer 1

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

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

尽管它通常取决于特定的标记。

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