Html 在html中创建按钮下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3224450/
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
creating button drop down in html?
提问by SuperString
I am new to web programming. I want to create buttons in html and when you hover over it, it shows a drop down of options for pages you want to go to.
我是网络编程的新手。我想在 html 中创建按钮，当您将鼠标悬停在它上面时，它会显示您想要转到的页面选项的下拉列表。
Any help is appreciated. Thanks!
任何帮助表示赞赏。谢谢！
回答by Gert Grenander
Here's a very basic example of what you're trying to achieve. It's actually not a button, but a styled list. Since you're new to HTML, I'll post the entire code, so that you can copy and paste it:
这是您要实现的目标的一个非常基本的示例。它实际上不是一个按钮，而是一个样式列表。由于您不熟悉 HTML，我将发布整个代码，以便您可以复制和粘贴它：
#button {
/* Box in the button */
display: block;
width: 190px;
}
#button a {
text-decoration: none;
/* Remove the underline from the links. */
}
#button ul {
list-style-type: none;
/* Remove the bullets from the list */
}
#button .top {
background-color: #DDD;
/* The button background */
}
#button ul li.item {
display: none;
/* By default, do not display the items (which contains the links) */
}
#button ul:hover .item {
/* When the user hovers over the button (or any of the links) */
display: block;
border: 1px solid black;
background-color: #EDC;
}<body>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item"><a href="http://serverfault.com/">Visit serverfault</a></li>
<li class="item"><a href="http://superuser.com/">Visit superuser</a></li>
<li class="item"><a href="http://doctype.com/">Visit doctype</a></li>
</ul>
</div>
</body>回答by derekerdmann
Sounds like you're looking for some simple CSS-based dropdowns - I recommend what's called a "Suckerfish" style dropdown. This link uses several items for a horizontal menu, but it can easily be adapted to one link.
听起来您正在寻找一些简单的基于 CSS 的下拉列表 - 我推荐所谓的“Suckerfish”样式下拉列表。此链接使用多个项目作为一个水平菜单，但它可以很容易地适应一个链接。
