Question

我正在使用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中使用的'+'兄弟选择器，我哪里出错？

Answer 1

您需要确保IE在标准模式下运行 - 输入如下文档类型：

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

来自the documentation：

相邻的兄弟组合子是一个“加号”（+）字符，用于分隔两个简单的选择器。空白并不重要。

形式为“E + F”的选择器在它紧跟在文档树中的兄弟元素E之后匹配元素F，忽略非元素节点（例如文本节点和注释）。元素E和F必须共享相同的父级，E必须紧接在F之前。要匹配父级的第一个子级，请使用：first-child伪类。

注意需要Windows Internet Explorer 7或更高版本   注意 组合器仅在符合标准的模式下启用（严格！DOCTYPE）。

Answer 2

将悬停添加到li元素并修复悬停是否更简单，即使用此http://www.xs4all.nl/~peterned/csshover.html

即

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

希望有所帮助

约什

CSS邻近兄弟选择器 - IE8问题

2 个答案: