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/