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.
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.
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-hover
class so that the dropdown opens after hovering over the menu item.
<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.
<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.
<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>
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>
Source Code: Output