5

我正在使用 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>

假设当鼠标悬停在“Hover Over Me”上时，应该显示兄弟姐妹ul。它在 Firefox 中运行良好，但在 IE8 中根本不行。我确定我以前在 IE8 中使用过“+”兄弟选择器，我哪里出错了？

4

2 回答 2

9

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

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

从文档中：

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

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

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

于 2009-10-23T10:33:32.850 回答
0

would it be simpler to add the hover on the li element and fix the hover for ie using this http://www.xs4all.nl/~peterned/csshover.html

ie

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

Hope that helps

Josh

于 2009-10-23T10:39:33.343 回答