题
我正在使用UL / LI结构创建菜单系统。我正在尝试将兄弟选择器用于悬停/显示子菜单。
我正在使用它;
#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中使用的'+'兄弟选择器,我哪里出错?
解决方案
您需要确保IE在标准模式下运行 - 输入如下文档类型:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
从文档:
相邻的兄弟组合子是“加号”。 (+)分隔两个简单选择器的字符。空白并不重要。
形式为“E + F”的选择器。当元素F紧跟在文档树中的兄弟元素E之后,忽略非元素节点(例如文本节点和注释)时匹配元素F.元素E和F必须共享相同的父级,E必须紧接在F之前。要匹配父级的第一个子级,请使用:first-child伪类。
注意需要Windows Internet Explorer 7或更高版本。
注意 组合器仅在符合标准的模式下启用(严格!DOCTYPE)。
其他提示
将悬停添加到li元素并修复悬停是否更简单,即使用 http://www.xs4all.nl/~peterned/csshover.html
即
#MainMenu li.Sel ul li.HasSub:hover {
display: block;
}
希望有所帮助
约什
不隶属于 StackOverflow