Tools Contact Us

Drop-down Menu Button

A button that shows a pop-open menu-type list when clicked. Issue: no keyboard response, accessability issues(?).

Code (minimum required)

<style>
  /* dropdown menu/options - un-comment border-radius rules for rounded corners */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown > button {
    padding-right: .75rem;
  }
  .dropdown > div { /* Dropdown content (in sub-Div - hidden by default) */
    display: none;
    position: absolute;
    background-color: white;
    /* border-radius: .5rem; */
    border-top-left-radius: 0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 3;
    overflow: auto;
    max-height: 500px;
  }
  @media (prefers-color-scheme: dark) {
    .dropdown > div {
      box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.6);
    }
  }
  .input-with-button .dropdown > div { /* flush options to the right - change corner rounding */
    right: 0;
    border-radius: .5rem;
    border-top-right-radius: 0;
  }
  .dropdown > div a { /* Links inside the dropdown */
    color: black;
    padding: .5rem .75rem;
    text-decoration: none;
    display: block;
    z-index: 3;
  }
  .dropdown > div a:first-child {
    border-top-left-radius: 0;
    /* border-top-right-radius: .5rem; */
  }
   .input-with-button .dropdown > div a:first-child { /* flush options to the right - change corner rounding */
    /* border-top-left-radius: .5rem; */
    border-top-right-radius: 0;
  }
  .dropdown > div a:last-child {
    /* border-bottom-left-radius: .5rem; */
    /* border-bottom-right-radius: .5rem; */
  }
  .dropdown > div a:hover { /* Change color of dropdown links on hover */
    color: white;
    background-color: blue;
  }
  .dropdown:where(:active, :focus, :hover) > div { /* Show the dropdown menu on hover */
    display: block;
  }
  .dropdown:where(:active, :focus, :hover) > button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
</style>

<div class="dropdown">
  <button style="margin:0;">Dropdown  ></button>
  <div>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
  </div>
</div>