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.

Pure CSS Dropdown Classes

There are following types of predefined classes in Pure CSS.

pure-menu-has-children: - Assign to those menu items in which you want to create drop-down menu.
pure-menu-allow-hover: It is used to open the dropdown menu after hovering the menu item.

pure-menu-children: Assign this class to dropdown menu container i.e <ul> element.
pure-menu-item: It is used for dropdown items.
pure-menu-link:It is used for link element of the dropdown menu.

Steps To Create Dropdown Menu

To create a dropdown menu, add a pure-menu-has-children class to those menu item under which you want to create a dropdown menu. Add another pure-menu-allow-hoverclass so that the dropdown opens after hovering over the menu item.

   	 Step 1
    
    
	<div class="pure-menu pure-menu-horizontal">
	  <ul class="pure-menu-list">
	    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
	      <a href="#" id="menuLink1" class="pure-menu-link">Dropdown</a>
	    </li>
	  </ul>
	</div>
   
  

Add the pure-menu-children class to the dropdown container i.e. <ul> element.

   	  Step 2
    
    
	<div class="pure-menu pure-menu-horizontal">
	  <ul class="pure-menu-list">
	    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
	      <a href="#" id="menuLink1" class="pure-menu-link">Dropdown</a>
	      <ul class="pure-menu-children">
	 
	      </ul>
	    </li>
	  </ul>
	</div>
   
  

Add the pure-menu-item class to the each dropdown items and the pure-menu-link class to the every dropdown hyperlink (<a>) element.

   	  Step 3
    
    
	 <div class="pure-menu pure-menu-horizontal">
	  <ul class="pure-menu-list">
	    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
	      <a href="#" id="menuLink1" class="pure-menu-link">Dropdown</a>
	      <ul class="pure-menu-children">
	         <li class="pure-menu-item">
	          <a href="#" class="pure-menu-link">Link</a>
	        </li>
	      </ul>
	    </li>
	  </ul>
	</div>
   
  

Complete Source Code

Source Code

          
            <div class="pure-menu pure-menu-horizontal" style="height:200px;">
      <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

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4