當頁面包含Google Map時，修復IE7中CSS/JS下拉菜單的最佳方法

Question

我有一個頁面使用<ul>列表進行導航（Javascript更改樣式以在鼠標懸停上顯示或不顯示）。

這對我工作正常除了在IE6和IE7當我有一個谷歌地圖的網頁。

在這種情況下，下拉菜單根本不起作用。但是，該頁面繼續在FireFox 2中工作。

我做了一點研究，發現這可能是IE Select Box Bug的一個例子，但我不確定，因爲Google Map似乎是使用<div>，而不是。

是否有其他人遇到類似這樣的問題？如果是的話，他們是否有解決這個問題的最佳方法的建議？

Answer 1

我不知道這是否可以解決您的問題，但您可能想嘗試this solution at ccsplay.co.uk，它可以解決菜單出現在下拉列表下方的問題。我不知道它是否可以肯定，但值得一試。

Answer 2

我沒有立即爲您解答，但this answer（特別是IE DOM檢查器）中提到的工具可能會有所幫助。

Answer 3

我固定使用這個jQuery沒有出現在Flash動畫在IE6/IE7/IE8下拉菜單中的類似問題：

$(function() { 
    $("#primary-nav").appendTo("#footer"); 
}); 

哪裏primary-nav是下拉容器元素的ID和footer是頁面上最後一個元素的ID。然後，我使用絕對定位將下拉列表重新定位到它們所屬的頂部。

這個原因起作用的原因是因爲IE尊重源排序比它的z-index多。儘管如此，它仍然無法在Windows Media Player插件的頂部顯示。

Answer 4

我相信可能會發生這種情況，因爲IE 6+使用Active-X來解析CSS。

隨着時間的推移，我不得不調整自己的工作，在我的CSS中包含一些IE瀏覽器黑客，以便與多個瀏覽器兼容。

我會先嚐試做一個沒有Javascript的菜單，使用純CSS和包括我提到的黑客。它可能會解決你的問題。你實際上並不需要Javascript來改變鼠標懸停和類似的東西。

如果你想看看什麼CSS黑客大概是：單擊here

如果你想看看一些純CSS菜單實例：單擊here

希望這有助於！

Answer 5

根據this google maps thread，你是正確的 - 一個IFrame是由谷歌代碼插入。

你需要使用哪個丹提到的解決方案，

你可能想嘗試this solution at ccsplay.co.uk它修正出現的下拉列表

下

或者菜單的問題，請參閱Internet Explorer HACK/Fix For Select Box Showing through DIV 。

基本上，解決方案是使用JavaScript將css菜單放置在IE6的IFrame中。

另一種解決方案是在CSS菜單被拉下時使用JavaScript隱藏Google地圖，或者在CSS菜單被拉下時用靜態地圖（甚至可能是Google靜態地圖）替換Google Map。