CSS控制的下拉菜單的IE8問題

我創建了一個網站，我建立了一個3級下拉菜單。除IE8以外，所有瀏覽器中的所有瀏覽器都運行良好。在IE8中，當您將鼠標懸停在最高級別的按鈕上時，會顯示下拉菜單。當您將鼠標懸停在任何有子級的輔助頁面上時，菜單應該顯示在父頁面的右側，並且在Chrome，Firefox，Safari和IE9 +中執行此操作。CSS控制的下拉菜單的IE8問題

我希望有人可以看看網站，讓我知道你是否有任何想法。

http://sightlines.quantumdynamix.net/

將鼠標懸停在「我們是誰」和「我們的團隊」應該有一個三級菜單，但它不能在IE8顯示。

這裏是顯示第三級菜單的CSS：

#mainNavContainer .sub-menu li:hover > div > .sub-menu { 
     display: block; 
}

這裏是菜單代碼（下調，因爲你不會需要爲這個整個菜單）。對不起，大量的課程，但它是一個WordPress的菜單。

<div id="mainNavContainer"> 
    <div class="menu-main-menu-container"> 
     <ul id="menu-main-menu" class="menu"> 
      <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first has_children menu-item-72"> 
       <a href="/who-we-are/">Who We Are</a> 
       <div class="sub-menu-container"> 
        <ul class="sub-menu"> 
         <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"> 
          <a href="/who-we-are/our-story/">Our Story</a> 
         </li> 
         <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page has_children menu-item-74"> 
          <a href="/who-we-are/our-team/">Our Team</a> 
          <div class="sub-menu-container"> 
           <ul class="sub-menu"> 
            <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"> 
             <a href="/who-we-are/our-team/executive-team/">Executive Team</a> 
            </li> 
            <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"> 
             <a href="/who-we-are/our-team/leadership-team/">Leadership Team</a> 
            </li> 
           </ul> 
          </div> 
         </li> 
        </ul> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div>

下面是正在發生的事情的截圖。藍色框由IE8中的開發工具生成，表明瀏覽器知道子菜單的位置，但是當我將鼠標懸停在我們的團隊上時，它不顯示。

Example

來源

2013-06-18 Joe

似乎在這裏工作很好。 –

在ie8中，您看到了第三級菜單？我通過Spoon.net運行ie8（我們通常在這裏測試舊版瀏覽器），它不適用於我或辦公室的其他人。 – Joe

使用'Document Mode：IE8 Standards'測試您的IE瀏覽器。要更改「文檔模式」，只需在瀏覽器打開時按下「F12」。「Web瀏覽器模擬器」不一致。 –

這個CSS是線是造成錯誤：

filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444);

當我在IE8的開發工具所瀏覽的站點，該行如下：

filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444); BORDER-LEFT: #d5d5d5 1px solid

現在我修改對此，我無法獲得完整的列表，但最初除了BORDER-LEFT之外，還有許多其他樣式出現在濾鏡行中。

我不確定過濾器中導致錯誤的是什麼，但是我們決定爲ie8或更早版本的用戶配置陰影，因此刪除過濾器會修復所有問題。

來源

2013-06-20 20:15:17 Joe

我不能使用Spoon.net - 這是一種有償服務 - 但試試這個：

#mainNavContainer .sub-menu li:hover > div > .sub-menu:hover { 
    display: block; 
}

並請，儘量給你的問題的照片。

來源

2013-06-18 20:19:32

我添加了一個鏈接到原始文章中正在發生的事情的屏幕截圖。我還沒有發佈照片的必要信譽。我試過這個CSS，它沒有工作。 – Joe

你是否試圖做我說的？ –

是的（我編輯了我的評論，包括它沒有工作，但我可能太慢了）。我試過這個CSS，但它並沒有導致網站發揮任何作用（註釋掉原始樣式並添加了你的）。 – Joe

CSS控制的下拉菜單的IE8問題

回答

相關問題