Is it possible to create a button with a dropdown menu with just HTML & CSS?

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

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

When the link is clicked (hover is fine too, but click is preferred), I want ul#actions to show, where I can then chose my action. I tried to do something like this, but the menu (ul#actions) disappears when the cursor moves out of the button.

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

Do I need javascript/jquery to do something like this?

Is it possible to create a button with a dropdown menu with just HTML & CSS?

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

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

When the link is clicked (hover is fine too, but click is preferred), I want ul#actions to show, where I can then chose my action. I tried to do something like this, but the menu (ul#actions) disappears when the cursor moves out of the button.

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

Do I need javascript/jquery to do something like this?

• javascript
• jquery
• html
• css

• Not sure exactly what you're going for, but try this: #TakeAction:hover + ul#actions, ul#actions:hover – user1932079 Commented May 8, 2013 at 23:51
• take a look at cssmenumaker.com or cssmenubuilder.com/home or purecssmenu.com – lukeocom Commented May 9, 2013 at 0:19

2 Answers 2

Try enclose it all in a div and put the hover on that 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;
}

On hover: http://jsfiddle.net/gpf5n/

On click: http://jsfiddle.net/5p2SQ/

You can just use HTML Select Tag.

Here is my solution. 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;
}

I hope this helps.