javascript 使用 HTML 和 CSS 的鼠标悬停导航下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7717595/
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
Mouse-over Navigation Dropdown Menu Using HTML and CSS
提问by Brent
I would like to ask, if there is any way to develop a mouse-over dropdown menue using CSS and HTML, because I have seen before some websites like google for example developed such menus and it seems that once you pass through it a hidden tag gonna be visible to you.
我想问一下，是否有任何方法可以使用 CSS 和 HTML 开发鼠标悬停下拉菜单，因为我之前看到一些像 google 这样的网站开发了这样的菜单，而且一旦你通过它似乎一个隐藏的标签会被你看到。
Please if any one have an idea, provide a source code of that idea
如果有人有想法，请提供该想法的源代码
Thanks and regards
谢谢并恭祝安康
回答by ShaneC
This is referred to a CSS hover menu. They're a great alternative to using JavaScript.
这被称为 CSS 悬停菜单。它们是使用 JavaScript 的绝佳替代方案。
Sample implementation:
示例实现：
.trigger ul.menu
{
display: none;
}
.trigger:hover ul.menu
{
display: block;
}
Sample Tutorial: http://www.shingokko.com/blog-entry/pure-css-hover-menu.html
示例教程：http: //www.shingokko.com/blog-entry/pure-css-hover-menu.html
Contrary to other answers, this method iscross-browser compatible. If implemented correctly, it will work just fine in IE6+ (Source).
与其他答案相反，此方法是跨浏览器兼容的。如果正确实施，它将在 IE6+ (Source) 中正常工作。
回答by Brent
I don't think I can explain it better than this: http://www.htmldog.com/articles/suckerfish/dropdowns/
我认为我不能比这更好地解释它：http: //www.htmldog.com/articles/suckerfish/dropdowns/
That's what's known as "Son of Suckerfish Dropdowns". It should get you going on the right direction. Do be aware that CSS-only dropdowns won't work in IE 6 and older.
这就是所谓的“Suckerfish Dropdowns 之子”。它应该让你朝着正确的方向前进。请注意，仅 CSS 下拉菜单在 IE 6 及更早版本中不起作用。
