CSS鄰接兄弟選擇器-IE8問題

我正在創建一個使用UL/LI結構的菜單系統。我試圖使用兄弟選擇器來懸停/顯示子菜單。CSS鄰接兄弟選擇器-IE8問題

我正在使用這個;

#MainMenu li.Sel ul li.HasSub a:hover+ul { 
    display: block; 
}

的UL結構會是這樣的;

<ul id='MainMenu'> 
    <li class='Sel'> 
    <a href='#'>Click Me</a> 
     <ul> 
      <li class='HasSub'> 
       <a href='#'>Hover Over Me</a> 
       <ul> 
        <li>Link</li> 
        <li>Link</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

假設當鼠標懸停在「懸停在我身上」時，應該顯示同級ul。它在Firefox中效果很好，但在IE8中完全沒有。我確信我以前見過用在IE8中的'+'兄弟選擇器，我哪裏會出錯？

來源

2009-10-23 Joel

你需要確保IE在標準模式下運行 - 放在一個DOCTYPE這樣的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

從the documentation：

相鄰的兄弟組合子是一個「加號」（ +）字符分隔兩個簡單的選擇器。空白不重要。

形式「E + F」的選擇符在元素F緊跟在文檔樹中的兄弟元素E後面時忽略非元素節點（如文本節點和註釋）。元素E和F必須共享同一父元素，並且E必須緊接在F.之前。要匹配父元素的第一個子元素，請使用：first-child僞元類。

注意需要Windows Internet Explorer 7或更高版本。
注意組合器僅在符合標準的模式（嚴格！DOCTYPE）下啓用。

來源

2009-10-23 10:33:32 Greg

哈。有趣的是，我放棄了文檔類型，這樣我就可以在表格單元格中創建一個iframe 100％的高度。謝謝，我猜測我將不得不嘗試找出100％高度的東西。有任何想法嗎？我將不得不使用JS for IE6菜單效果。乾杯。 – Joel

會是簡單的添加li元素上懸停，並使用修復IE瀏覽器的懸停這個http://www.xs4all.nl/~peterned/csshover.html

即

#MainMenu li.Sel ul li.HasSub:hover { 
    display: block; 
}

希望幫助

喬希

來源

2009-10-23 10:39:33 Josh

CSS鄰接兄弟選擇器-IE8問題

回答

相關問題