Pure CSS Dropdown

A Pure CSS dropdown menu is basically a list of options that are only shown whenever users hover or click the menu. It provides functionality to select either single or multi-list items.

Basic Steps To Create Dropdown Menu

To create a dropdown menu, add .pure-menu-has-children to the menu item and then create a dropdown menu and make another list under it for the dropdown.

To display the dropdown menu using the hover effect, add .pure-menu-allow-hover class to the element having class pure-menu-has-children.

General Syntax

      <div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">Home</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
      <a href="#" id="menuLink1" class="pure-menu-link">Contacts </a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Email</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Try it now

Source Code

          
            <div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">Home</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
      <a href="#" id="menuLink1" class="pure-menu-link">Services </a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Web Design</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Web Development</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Graphics Design</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Try it now

Source Code : Output

Pure CSS Dropdown

Basic Steps To Create Dropdown Menu

Web Tutorials