Is it possible to make a dropdown button using only HTML and CSS?

Question

Is it possible to make a dropdown button using only HTML and CSS?

Can a button with a dropdown menu be created using just HTML and CSS?

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

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

I want the ul#actions menu to appear when the link is clicked (hover is fine too, but click is preferred) so that I can choose my action. I attempted something similar, but the menu disappears when the cursor moves out of the button.

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

Is it necessary to use javascript/jquery to achieve this functionality?

javascript jquery html css

Answer 1

Answer №1

One way to achieve this effect is by enclosing everything in a div and applying the hover effect to that div:

Here is an example of how you can do it using HTML and CSS:

<div class="options">
  <a id="TakeAction">Take Action</a>
  <ul id="actions">
    <li>action 1</li>
    <li>action 2</li>
  </ul>
</div>

In your CSS file, you can add these rules:

ul#actions
{
    display:none;
}
.options:hover ul#actions
{
    display: block;
}

To see this in action on hover, check out this JSFiddle link.

If you'd like to see the click event version, here is another JSFiddle link.

Answer 2

One way to achieve this effect is by enclosing everything in a div and applying the hover effect to that div:

Here is an example of how you can do it using HTML and CSS:

<div class="options">
  <a id="TakeAction">Take Action</a>
  <ul id="actions">
    <li>action 1</li>
    <li>action 2</li>
  </ul>
</div>

In your CSS file, you can add these rules:

ul#actions
{
    display:none;
}
.options:hover ul#actions
{
    display: block;
}

To see this in action on hover, check out this JSFiddle link.

If you'd like to see the click event version, here is another JSFiddle link.

Answer 3

Answer №2

To create a dropdown menu, you can utilize the HTML Select Tag.

Check out my approach: Demo: Stylish Dropdown button using CSS

Here is the HTML code:

<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>

And here's the CSS code:

option.head {
  selected:selected;
  display:none;
  disabled:disabled;
}

I trust this explanation proves helpful to you.

Answer 4

To create a dropdown menu, you can utilize the HTML Select Tag.

Check out my approach: Demo: Stylish Dropdown button using CSS

Here is the HTML code:

<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>

And here's the CSS code:

option.head {
  selected:selected;
  display:none;
  disabled:disabled;
}

I trust this explanation proves helpful to you.

Is it possible to make a dropdown button using only HTML and CSS?

Answer №1

Answer №2

Similar questions

What is the most effective method for incorporating web APIs (such as setTimeout, fetch, etc.) within the V8 engine?

JavaScript 'await' throws error 'then is not defined'

Verify your credentials in Geoserver using ASP.NET and IIS

When using the "Content-Disposition" header with the value "inline;filename=" + fileName, it does not necessarily guarantee that PDF files will be displayed directly

Getting the (x,y) Coordinate Value from jQuery Script and Saving it as a NSString

What is the best way to eliminate the Iframe scrollbar while ensuring that the entire page loads?

Tips for expanding frisby.js by adding new "expect" functionalities?

how to style field color for invalid input in angular reactive forms

The Strophe.muc plugin and backbone improper binding of callbacks

How can I prevent displaying server-side validation messages if the client-side validation message is already being shown?

discovering the nearest preceding sibling that includes the class .myClass

Retrieve the javascript code from a different page using Ajax and xmlHttp.open

Steps to duplicate a Select input and attach it to a div using Jquery

Display information using HTML elements within a loop in JavaScript

How to extract hover CSS property from a Selenium WebElement using XPath in Python

How can I implement Jquery ajax calls in various JavaScript functions?

Incorporating Ace Editor into a jQuery UI Resizable Element

Running the command Yarn build with Vite.js and React.js is encountering issues and is not functioning properly

Minimize transpiled code helpers using babel and webpack

Managing data and files in a single AJAX request: A guide on handling POST requests sent by JS FormData