Html 如何使用 :hover on <a> 代替悬停在 <ul> 上制作下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1875696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Dropdown menu using :hover on <a> in place of hover on <ul>?
提问by Jitendra Vyas
IE 6 only support :Hover on <a>then can we make css drop down using :hover on <a>
IE 6 仅支持 :Hover on<a>那么我们可以使用 :hover on 使 css 下拉<a>
http://htmldog.com/articles/suckerfish/dropdowns/
http://htmldog.com/articles/suckerfish/dropdowns/
This example use JavaScript to add hover on LI
此示例使用 JavaScript 在 LI 上添加悬停
'sfhover' class to li elements in the 'nav' id'd ul element when they are 'moused over' and removes it, using a regular expression, when 'moused out'.
So now we've got the Suckerfish pumping out new classes, the next step is to simply duplicate the :hover selector with 'sfhover' class selectors:
'sfhover' 类在 'nav' id'd ul 元素中的 li 元素被“鼠标悬停”并在“鼠标移开”时使用正则表达式将其删除。
所以现在我们已经让 Suckerfish 输出了新的类，下一步是简单地复制 :hover 选择器和 'sfhover' 类选择器：
回答by Annabelle
You can sort ofmake it work. The code below displays a functional menu that relies on a:hoverto trigger display. However, it comes with a few caveats:
您可以排序的，使其工作。下面的代码显示了一个依赖于a:hover触发显示的功能菜单。但是，它有一些警告：
- Since you can't nest
<a />tags in HTMLor XHTML, you're limited to a single level of menu items. - For the same reason, you have to use JavaScript
onclickevent handlers to handle user clicks on menu items. - IE6 seems to require a
:hoverrule on the anchor tag itself in order to trigger hover behavior. Without the#menu:hoverrule, the#menu:hover spanwas ignored. The rule needs to have at least one style assignment in it, and not all properties seem to work (e.g.background-colororborderworked, butcolordidn't).
- 由于您不能
<a />在HTML或XHTML 中嵌套标签，因此您只能使用单一级别的菜单项。 - 出于同样的原因，您必须使用 JavaScript
onclick事件处理程序来处理用户对菜单项的点击。 - IE6 似乎需要
:hover锚标签本身的规则才能触发悬停行为。没有#menu:hover规则，就#menu:hover span被忽略了。该规则需要至少有一个样式分配，并且并非所有属性似乎都有效（例如background-color或border有效，但color没有）。
Code:
代码：
<!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>
UPDATE:
IE6 does sort of work with nested <a />elements. I tried embedding a link within a submenu, and it displayed properly but mousing over the inner link caused the outer link to lose :hover, and the menu would disappear out from under the cursor.
更新：IE6 对嵌套<a />元素做了一些工作。我尝试在子菜单中嵌入一个链接，它显示正确，但是将鼠标悬停在内部链接上会导致外部链接丢失:hover，并且菜单将从光标下方消失。
However, apparently if you wrap the menu in a table (as demonstrated here), it will work. Note that the below code works, but won't validate and might blow up in other browsers:
但是，很显然，如果你包装在一个表中的菜单（如证明这里），它会工作。请注意，以下代码有效，但无法验证并可能在其他浏览器中崩溃：
<!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>
回答by jball
Try ie7-js.
试试ie7-js。
If javascript is absolutely not an option, you can use one of the many examples of CSS only dropdown menus, such as The ULTIMATE CSS only drop-down menuby Stu Nicholls.
如果 javascript 绝对不是一个选项，您可以使用 CSS only 下拉菜单的众多示例之一，例如Stu Nicholls 的The ULTIMATE CSS only drop-down menu。
In my opinion, making IE6 behave all around via js is preferable to css hacks that have to be implemented for every feature it lacks.
在我看来，通过 js 使 IE6 的所有行为都比 css hacks 更可取，css hacks 必须为它缺少的每个功能实现。
回答by Nick Larsen
Yes you can as long as you nest the sub menu within the anchor.
是的，只要您将子菜单嵌套在锚点中即可。
<a class="hoverMenu">
MenuText
<div class="subMenu">
SubMenuText
</div>
</a>
.hoverMenu .subMenu { display: none; }
.hoverMenu:Hover .subMenu { display: block; }
I haven't tested this out for IE6, but this is the basic idea behind an all css menu in any other browser. Not sure if you can nest anchors or not.
我还没有针对 IE6 测试过这个，但这是任何其他浏览器中所有 css 菜单背后的基本思想。不确定您是否可以嵌套锚点。
