javascript - 仅使用 HTML 和 CSS 创建下拉按钮？

Question

是否可以仅使用 HTML 和 CSS 创建带有下拉菜单的按钮？

<a id="TakeAction">Take Action</a>

<ul id="actions">
  <li>action 1</li>
  <li>action 2</li>
   ...
</ul>

单击链接时（悬停也可以，但首选单击），我希望显示 ul#actions，然后我可以在其中选择我的操作。我试图做这样的事情，但是当光标移出按钮时菜单（ul#actions）消失了。

ul#actions
{
    display:none;
}
#TakeAction:hover + ul#actions
{
    display: block;
}

我需要 javascript/jquery 来做这样的事情吗？

Answer 1

尝试将其全部包含在一个 div 中并将鼠标悬停在该 div 上：

HTML：

<div class="actions">
  <a id="TakeAction">Take Action</a>
  <ul id="actions">
    <li>action 1</li>
    <li>action 2</li>
  </ul>
</div>

CSS：

ul#actions
{
    display:none;
}
.actions:hover ul#actions
{
    display: block;
}

悬停时：http: //jsfiddle.net/gpf5n/

点击：http: //jsfiddle.net/5p2SQ/

Answer 2

您可以只使用 HTML 选择标签。

这是我的解决方案。小提琴：带有 CSS 的下拉按钮

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

option.head {
  selected:selected;
  display:none;
  disabled:disabled;
}

我希望这有帮助。