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问题

回答

相关问题