Создание выпадающей кнопки с помощью 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 
{ 
    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/

On нажмите: http://jsfiddle.net/5p2SQ/

Answer 2

Вы можете просто использовать HTML Select Tag.

Это мое решение. 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; 
} 

Я надеюсь, что это помогает.