Creating a dropdown button with just HTML & CSS?

Question

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?

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

Dan P. · Accepted Answer · 2013-05-09 00:07:56Z

10

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/

edited May 9, 2013 at 0:07

answered May 8, 2013 at 23:54

Dan P.

1,4311 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Prabhu Over a year ago

Thank you. Is there anyway to change it to onclick rather than hover?

Prabhu Over a year ago

Thanks, that's exactly what I was looking for however, there's an issue with the jsFiddle code if you could help with that...the menu stays open even after I click outside it.

Dan P. Over a year ago

Is there a reason you don't want to use Javascript?

Prabhu Over a year ago

A little bit of js is fine. I saw a lot of jquery and js solutions online, and didn't want to deal with all that code. But a little bit is fine...

Abhishek Pandey · Accepted Answer · 2017-03-24 06:33:59Z

2

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.

edited Mar 24, 2017 at 6:33

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

answered May 9, 2013 at 0:37

RyanskyHeisenberg

5310 bronze badges

2 Comments

zik Over a year ago

Why are you styling inline? You should be using CSS as that is what the question is asking; "Can this be done with HTML & CSS". Also inline styling is pretty much a no-no, except for when you build HTML emails.

ThorSummoner Over a year ago

Interesting way to hide the placeholder item.

Collectives™ on Stack Overflow

Creating a dropdown button with just HTML & CSS?

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related