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?
Best Answer
Try enclose it all in a div and put the hover on that div:
HTML:
CSS:
On hover: http://jsfiddle.net/gpf5n/
On click: http://jsfiddle.net/5p2SQ/