Home / Pure CSS Tutorial / Pure CSS – Horizontal Menu

Pure CSS – Horizontal Menu:

In this tutorial, we will discuss about creating the horizontal Menu using Pure CSS. We need to use the class “pure-menu-horizontal” to create the horizontal menu.

As part of this, we will use the class names “pure-menu-link” for creating the menu link and “pure-menu-item”, “pure-menu-heading” for creating the menu items and headings. Below is the example to create horizontal menu.

Example:

<html>

<head>

<title>Pure CSS Horizontal 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"><a href="#" class="pure-menu-link">About</a></li>

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

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

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

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

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

</ul>

</div>

</body>

</html>

Below is the output: