CSS JS下拉菜單：擴展懸停區域超出圖像鏈接

Question

我試圖複製導航在www.accenture.com

看見，這是我已經能夠到目前爲止實現： http://alfadesigntech.com/new/pages/inside-page-template.html

我用一個java腳本來顯示/隱藏下拉菜單，它實際上是一個帶有更多鏈接的隱藏div。問題是，只要我離開菜單按鈕，下拉菜單再次隱藏。雖然我可以使用延遲，但這不是我正在尋找的解決方案。

根據我有限的知識，可能的解決方案是以某種方式擴展懸停區域以覆蓋隱藏的盒子。我怎樣才能做到這一點？有沒有其他解決方案？

任何幫助將非常感激..在此先感謝..

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> 

雖然它通常取決於特定的標記。

也有可能的解決方案 - 當鏈接面板打開時 - 如果將鼠標移出並將鼠標懸停在錨點圖像上，則將其隱藏。