Question

171

Creating a dropdown button with just HTML & CSS?

rated 0 times [ 172] [ 1] / answers: 1 / hits: 32154 / 11 Years ago, wed, may 8, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazlynnessencec

Add To Favorites

Follow

Total Points: 434

Total Questions: 113

Total Answers: 94

Location: Norway

Member since Mon, May 23, 2022

2 Years ago

answered 11 Years ago aileent · Accepted Answer

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/