Pure CSS Vertical Multi-level Navigation Menu

Category: CSS & CSS3 , Menu & Navigation | December 10, 2014
Author: Viettu
Views Total: 9,648
Official Page: Go to website
Last Update: December 10, 2014
License: MIT

Preview:

Pure CSS Vertical Multi-level Navigation Menu

Description:

A Pure CSS/CSS3 vertical navigation menu that supports infinite sub menus using nested Html unordered lists.

How to use it:

Create a multi-level navigation menu using nested Html lists. Add the class ‘has-sub’ to your lists which have one or more sub menus.

<div class="navigation">
  <ul>
    <li class="has-sub"> <a href="#">Menu 1</a>
      <ul>
        <li class="has-sub"> <a href="#">Submenu 1.1</a>
          <ul>
            <li><a href="#">Submenu 1.1.1</a></li>
            <li class="has-sub"><a href="#">Submenu 1.1.2</a>
              <ul>
                <li><a href="#">Submenu 1.1.2.1</a></li>
                <li><a href="#">Submenu 1.1.2.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Submenu 1.2</a></li>
      </ul>
    </li>
    <li class="has-sub"> <a href="#">Menu 2</a>
      <ul>
        <li><a href="#">Submenu 2.1</a></li>
        <li><a href="#">Submenu 2.2</a></li>
      </ul>
    </li>
    <li class="has-sub"> <a href="#">Menu 3</a>
      <ul>
        <li><a href="#">Submenu 3.1</a></li>
        <li><a href="#">Submenu 3.2</a></li>
      </ul>
    </li>
  </ul>
</div>

The required CSS styles for the navigation menu.

.navigation {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul {
  position: relative;
  z-index: 500;
  float: left;
}

.navigation ul li {
  float: left;
  min-height: 0.05em;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}

.navigation ul li.hover,
.navigation ul li:hover {
  position: relative;
  z-index: 510;
  cursor: default;
}

.navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 520;
  width: 100%;
}

.navigation ul ul li { float: none; }

.navigation ul ul ul {
  top: 0;
  right: 0;
}

.navigation ul li:hover > ul { visibility: visible; }

.navigation ul ul {
  top: 0;
  left: 99%;
}

.navigation ul li { float: none; }

.navigation ul ul { margin-top: 0.05em; }

.navigation {
  width: 13em;
  background: #333333;
  font-family: 'roboto', Tahoma, Arial, sans-serif;
  zoom: 1;
}

.navigation:before {
  content: '';
  display: block;
}

.navigation:after {
  content: '';
  display: table;
  clear: both;
}

.navigation a {
  display: block;
  padding: 1em 1.3em;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.navigation > ul { width: 13em; }

.navigation ul ul { width: 13em; }

.navigation > ul > li > a {
  border-right: 0.3em solid #34A65F;
  color: #ffffff;
}

.navigation > ul > li > a:hover { color: #ffffff; }

.navigation > ul > li a:hover,
.navigation > ul > li:hover a { background: #34A65F; }

.navigation li { position: relative; }

.navigation ul li.has-sub > a:after {
  content: '»';
  position: absolute;
  right: 1em;
}

.navigation ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}

.navigation ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}

.navigation ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.navigation ul ul { border: 1px solid #34A65F; }

.navigation ul ul a { color: #ffffff; }

.navigation ul ul a:hover { color: #ffffff; }

.navigation ul ul li { border-bottom: 1px solid #0F8A5F; }

.navigation ul ul li:hover > a {
  background: #4eb1ff;
  color: #ffffff;
}

.navigation.align-right > ul > li > a {
  border-left: 0.3em solid #34A65F;
  border-right: none;
}

.navigation.align-right { float: right; }

.navigation.align-right li { text-align: right; }

.navigation.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}

.navigation.align-right ul li.has-sub > a:after { content: none; }

.navigation.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}

.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}

.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

You Might Be Interested In:

3 thoughts on “Pure CSS Vertical Multi-level Navigation Menu

  1. tushar

    Let’s assume that the list of items has height to accommodate 10 list items. Hence there is no need for scrollbar on the list and the above solution works. What if there are 20 list items for the same height that shows 10 list items at a time and hence the list would require a scrollbar (overflow: hidden), then the solution would not work. Is there any workaround for this?

    Reply
  2. Jornes

    I’m looking for this type of menu. But, is it possible to make it responsive? Is there any vertical menu comes with multi submenu that has responsive?

    Reply

Leave a Reply