CSS3級聯菜單在Chrome中不起作用

Question

我們有一個網站fabulouslanzarote.com，它有一個使用CSS3實現的導航菜單。 「度假村」和「社區」菜單選項有 子菜單。

最近有報道稱這些子菜單在Chrome中無法訪問。它們在頂級鏈接懸停時出現，但當您嘗試點擊其中一個鏈接時消失。

我們幾個月沒有更新網站，他們一直在上次部署之後工作，所以也許這是Chrome更新的結果？這些菜單在Firefox和Edge中運行良好。

有誰知道什麼是阻止子菜單在Chrome中正常工作嗎？

Answer 1

@Johannes是正確的。菜單有一個缺口，當你將光標移到它上面時，它會丟失懸停狀態。嘗試在ul.drop上添加一個透明僞元素來填補空白，並在光標移動時保持懸停狀態。

ul.drop:after { 
    content: ''; 
    position: absolute; 
    bottom: 100%; 
    left: 0; 
    right: 0; 
    height: 27px; 
} 

免責聲明：雖然我通常不推薦使用硬編碼值，您的菜單已經充分利用了他們。這就是我選擇27px的原因。它基於其他硬編碼值。

Answer 2

我認爲它們只是一點點遠遠低於主菜單：當你移動鼠標相當緩慢（而不是完全在中間），你鬆開「懸停」狀態，子菜單消失。

我會把它們往上移一點，然後把箭頭放在最前面，以避免這種情況。