Home / Pure CSS Tutorial / Pure CSS – Dropdown Menu

Pure CSS – Dropdown Menu:

In this tutorial, we will learn about creating the Dropdown Menu using Pure CSS. We need to use the classes “pure-menu-allow-hover” and “pure-menu-has-children” to create the Dropdown menu. Below is the example to create horizontal Dropdown menu.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Pure CSS Dropdown Menu</title>

<head>



<meta name="viewport" content="width=device-width, initial-scale=1">

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



</head>

<body>

<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">Products</a>

<ul class="pure-menu-children">

<li class="pure-menu-item"><a href="#" class="pure-menu-link">Pro1</a></li>

<li class="pure-menu-item"><a href="#" class="pure-menu-link">Pro2</a></li>

<li class="pure-menu-item"><a href="#" class="pure-menu-link">Pro3</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

Below is the output: