Question

IE 6仅支持：将鼠标悬停在<a>上，然后我们可以使用以下内容进行css下拉：hover on <a>

http://htmldog.com/articles/suckerfish/dropdowns/

此示例使用JavaScript在LI

上添加悬停

'sfhover'类中的li元素   'nav'id'd ul元素   'moused over'并删除它，使用a   正式表达，当'被淘汰'时。

所以现在我们有了Suckerfish   下一步，抽出新课程   是简单地复制：悬停   选择器与'sfhover'类   选择器：

Answer 1

你可以排序让它发挥作用。下面的代码显示了一个功能菜单，它依赖于a:hover来触发显示。但是，它有一些警告：

由于您无法在HTML或XHTML中嵌套<a />代码，因此您只能使用一个级别的菜单项。
出于同样的原因，您必须使用JavaScript onclick事件处理程序来处理用户对菜单项的点击。
IE6似乎需要锚标记本身的:hover规则才能触发悬停行为。如果没有#menu:hover规则，#menu:hover span将被忽略。该规则需要至少包含一个样式分配，并非所有属性似乎都有效（例如background-color或border有效，但color没有。）

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>CSS Menu in IE6</title>
    <style type="text/css">
        #menu {
            background-color: #cccccc;
            color: black;
            text-decoration: none;
            position: relative;
        }

        #menu span {
            display: none;
        }

        /* I'm using <b /> tags for the submenu items, just to make the styling easier. */
        #menu span b {
            display: block;
            font-weight: normal;
        }

        /* IE6 seems to require some :hover rule on the anchor element itself.
           Without it, the '#menu:hover span' rule below is ignored. */
        #menu:hover {
            border: none;
        }

        #menu:hover span {
            background-color: #cccccc;
            cursor: pointer;
            display: block;
            position: absolute;
            top: 1em;
            left: 10px;
        }
    </style>
</head>
<body>
    <div>
        <a href="#" id="menu">Menu
            <span>
                <b onclick="alert('Item 1!');">Item 1</b>
                <b onclick="alert('Item 2!');">Item 2</b>
                <b onclick="alert('Item 3!');">Item 3</b>
            </span>
        </a>
        <p>
            Lorem ipsum doler sit amet...
        </p>
    </div>
</body>
</html>

<强>更新： IE6确实可以使用嵌套的<a />元素。我尝试在子菜单中嵌入一个链接，它显示正确，但是鼠标悬停在内部链接上导致外部链接丢失:hover，菜单将从光标下消失。

但是，显然如果你将菜单包装在一个表格中（如所示here），它就可以了。请注意，以下代码有效，但不会验证，可能会在其他浏览器中爆炸：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>CSS Menu in IE6</title>
    <style type="text/css">
        #menu {
            background-color: #cccccc;
            color: black;
            text-decoration: none;
        }

        #menu ul {
            display: none;
        }

        #menu:hover {
            border: none;
        }

        #menu:hover ul {
            background-color: #cccccc;
            display: block;
            margin: 0;
            margin-left: 10px;
            padding: 0;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div>
        <a href="#" id="menu">Menu
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <ul>
                            <li><a href="http://www.google.com">Google</a></li>
                            <li><a href="http://www.yahoo.com">Yahoo</a></li>
                            <li><a href="http://www.stackoverflow.com">Stack Overflow</a></li>
                        </ul>
                    </td>
                </tr>
            </table>
        </a>
        <p>
            Lorem ipsum doler sit amet...
        </p>
    </div>
</body>
</html>

Answer 2

试试ie7-js。

如果javascript绝对不是一个选项，您可以使用仅限CSS下拉菜单的众多示例之一，例如Stu Nicholls的The ULTIMATE CSS only drop-down menu。

在我看来，让IE6通过js表现得更好，对于必须针对它所缺少的每个功能实施的css hacks都是可取的。

Answer 3

是的，只要您将子菜单嵌套在锚点中，就可以。

<a class="hoverMenu">
  MenuText
  <div class="subMenu">
    SubMenuText
  </div>
</a>

.hoverMenu .subMenu { display: none; }
.hoverMenu:Hover .subMenu { display: block; }

我没有为IE6测试过这个，但这是任何其他浏览器中所有css菜单背后的基本思想。不确定你是否可以嵌套锚。

如何使用下拉菜单：将鼠标悬停在<a> in place of hover on <ul>?</ul></a>上

3 个答案: