只用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 Select Tag。

這是我的解決方案。 小提琴：帶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;
}

我希望這有幫助。