如何使用：悬停在 <a> 上而不是悬停在 <ul> 上来制作下拉菜单？答案

【问题标题】：How to make Dropdown menu using :hover on <a> in place of hover on <ul>?如何使用：悬停在 <a> 上而不是悬停在 <ul> 上来制作下拉菜单？
【发布时间】：2010-12-24 22:40:57
【问题描述】：

IE 6 仅支持 :Hover on <a> 然后我们可以使用 :hover on <a> 使 css 下拉

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

此示例使用 JavaScript 在 LI 上添加悬停

'sfhover' 类到 li 元素中 'nav' id'd ul 元素 'moused over' 并删除它，使用正则表达式，当“鼠标移出”时。

所以现在我们有了 Suckerfish 抽出新课程，下一步是简单地复制 :hover 带有“sfhover”类的选择器选择器：

【问题讨论】：

你能改写一下吗？我不确定你的问题是什么。
您能否编辑您的问题以阐明您对 javascript 的立场，并解释您避免使用 javascript 解决方案的原因？
此外，IE6 不会将 :hover 属性应用于锚标记内的元素。所以，如果你有，IE6 将不会遵循 a:hover span{} 的 CSS 样式

标签： html css xhtml internet-explorer-6

【解决方案1】：

试试ie7-js。

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

在我看来，通过 js 让 IE6 到处运行比必须针对它缺少的每个功能都实现的 css hack 更可取。

【讨论】：

我不想使用 javascript
你为什么要避免使用 javascript？
如果我可以在没有 javascript 的情况下制作菜单，那么我会选择它
您是否检查过任何 CSS 选项，例如我上面链接的那个？

【解决方案2】：

是的，只要将子菜单嵌套在锚点内即可。

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

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

我还没有在 IE6 上测试过，但这是任何其他浏览器中全 CSS 菜单背后的基本理念。不确定是否可以嵌套锚点。

【讨论】：

哦，好吧，虽然您的链接在 chrome 中运行良好，但很有趣。

【解决方案3】：

您可以在某种程度上让它发挥作用。下面的代码显示了一个依赖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>

【讨论】：

那么这个菜单如何在没有 js 的 IE6 中正常工作 grc.com/menu2/invitro.htm
@Jitendra，为什么您在链接到适合您的约束的解决方案时仍然问这个问题？
啊，聪明。我看到 IE 会正确显示嵌套链接，但与:hover 搭配起来效果不佳。显然将菜单包装在表格中可以解决此问题。非常不标准，但是如果您不关心验证，那么我想它会起作用。我的答案已更新为解释和示例。
还值得注意的是该页面上棘手的条件注释用法。他们对它们进行了结构化，IE6 将在顶级菜单锚元素内看到表格包裹的<ul />，但所有其他浏览器将看到未包裹的<ul /> 在锚元素旁边。