僅使用HTML和CSS創建下拉按鈕？

Question

是否可以使用HTML & CSS創建帶下拉菜單的按鈕？

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

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

當點擊鏈接（懸停也很好，但點擊是首選）時，我想要顯示ul＃動作，然後選擇我的動作。我試圖做這樣的事情，但當光標移出按鈕時，菜單（ul＃操作）就會消失。

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

我需要javascript/jquery來做這種事嗎？

Answer 1

儘量附上這一切在一個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選擇標籤。

這是我的解決方案。 Fiddle: Dropdown button with 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; 
} 

我希望這有助於。