Responsive Dropdown Nav Menu With Pure CSS

Preview:

Description:

A fully responsive, CSS only multi-level navigation that automatically collapses the regular horizontal menu into a toggleable dropdown menu on small screens.

How to use it:

Load the main style sheet responsive-menu.css in the head of the html document.

<link rel="stylesheet" href="css/responsive-menu.css">

Add menu toggles and sub menus to the navigation as follows:

<nav class="nav-bar">
  <label for="toggle" class="nav-bar__label">Menu</label>
  <input type="checkbox" id="toggle" class="nav-bar__toggle">
  <ul class="nav-bar__list">
    <li class="nav-bar__list-item">
        <a href="#" class="nav-bar__link">Menu Item 1</a>
    </li>
    <li class="nav-bar__list-item">
        <a href="#" class="nav-bar__link">Menu Item 2</a>
    </li>
    <li class="nav-bar__list-item">
        <a href="#" class="nav-bar__link">Menu Item 3</a>
    </li>
    <li class="nav-bar__list-item">
        <label for="toggle-sub-1" class="nav-bar__sub-label">Menu Item 4</label>
        <input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle">
        <ul class="nav-bar__list">
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 4.1</a>
            </li>
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 4.2</a>
            </li>
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 4.3</a>
            </li>
        </ul>
    </li>
    <li class="nav-bar__list-item">
        <a href="#" class="nav-bar__link">Menu Item 5</a>
    </li>
  </ul>
</nav>