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

【问题标题】：CSS JS Dropdown menu: Extend the hover area beyond the image linkCSS JS 下拉菜单：将悬停区域扩展到图像链接之外
【发布时间】：2011-10-18 08:55:13
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：