jQuery 仅使用 HTML 和 CSS 创建下拉按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16452079/
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 a dropdown button with just HTML & CSS?
提问by Prabhu
Is it possible to create a button with a dropdown menu with just HTML & CSS?
是否可以仅使用 HTML 和 CSS 创建带有下拉菜单的按钮？
<a id="TakeAction">Take Action</a>
<ul id="actions">
<li>action 1</li>
<li>action 2</li>
...
</ul>
When the link is clicked (hover is fine too, but click is preferred), I want ul#actions to show, where I can then chose my action. I tried to do something like this, but the menu (ul#actions) disappears when the cursor moves out of the button.
单击链接时（悬停也可以，但首选单击），我希望显示 ul#actions，然后我可以在其中选择我的操作。我试图做这样的事情，但是当光标移出按钮时菜单（ul#actions）消失了。
ul#actions
{
display:none;
}
#TakeAction:hover + ul#actions
{
display: block;
}
Do I need javascript/jquery to do something like this?
我需要 javascript/jquery 来做这样的事情吗？
回答by Dan P.
Try enclose it all in a div and put the hover on that div:
尝试将其全部包含在一个 div 中并将鼠标悬停在该 div 上：
HTML:
HTML：
<div class="actions">
<a id="TakeAction">Take Action</a>
<ul id="actions">
<li>action 1</li>
<li>action 2</li>
</ul>
</div>
CSS:
CSS：
ul#actions
{
display:none;
}
.actions:hover ul#actions
{
display: block;
}
On hover: http://jsfiddle.net/gpf5n/
悬停时：http: //jsfiddle.net/gpf5n/
On click: http://jsfiddle.net/5p2SQ/
回答by RyanskyHeisenberg
You can just use HTML Select Tag.
您可以只使用 HTML 选择标签。
Here is my solution. Fiddle: Dropdown button with CSS
这是我的解决方案。小提琴：带有 CSS 的下拉按钮
html
html
<select name='takeation'>
<option class='head'>Select Action</option>
<option value='Action 1'>Action 1</option>
<option value='Action 2'>Action 2</option>
<option value='Action 3'>Action 3</option>
</select>
css
css
option.head {
selected:selected;
display:none;
disabled:disabled;
}
I hope this helps.
我希望这有帮助。
