Pure.CSS Dropdown

You can create dropdown navigation by making small changes in markup. You have to add the class name "pure-menu-has-children" to the appropriate menu item to create a dropdown menu. To display the submenu on hover, include the class name "pure-menu-allow-hover".

Example:

Let's take an example to demonstrate how to create a dropdown menu:

<!DOCTYPE html>
<html>
<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">

<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="#" class="pure-menu-link">About Us</a>
        <ul class="pure-menu-children">
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Privacy Policy</a>
          </li>
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Contact Us</a>
          </li>
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Career</a>
          </li>
        </ul>
    </li>
  </ul>
</div>
</html>

Test it Now

Output: