CodePen Embed - Vertical Menu

<!DOCTYPE html>
<html>
<head>
  <title>Multilevel Vertical Menu</title>
</head>
<body>
  <div id="nav">
    <ul id="navbar">
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery<span id="arrow"> &rsaquo;&rsaquo;</span></a>
        <ul>
          <li><a href="#">Drop1<span id="arrow"> &rsaquo;&rsaquo;</span></a>
            <ul>
              <li><a href="#">Drop1 of 1</a></li>
              <li><a href="#">Drop2 of 1</a></li>
              <li><a href="#">Drop3 of 1</a></li>
              <li><a href="#">Drop4 of 1</a></li>
              <li><a href="#">Drop5 of 1</a></li>
            </ul>
          </li>
          <li><a href="#">Drop2<span id="arrow"> &rsaquo;&rsaquo;</span></a>
            <ul>
              <li><a href="#">Drop1 of 2</a></li>
              <li><a href="#">Drop2 of 2</a></li>
              <li><a href="#">Drop3 of 2</a></li>
              <li><a href="#">Drop4 of 2</a></li>
              <li><a href="#">Drop5 of 2</a></li>
            </ul>
          </li>
          <li><a href="#">Drop3<span id="arrow"> &rsaquo;&rsaquo;</span></a>
            <ul>
              <li><a href="#">Drop1 of 3</a></li>
              <li><a href="#">Drop2 of 3</a></li>
              <li><a href="#">Drop3 of 3</a></li>
              <li><a href="#">Drop4 of 3</a></li>
              <li><a href="#">Drop5 of 3<span id="arrow">&rsaquo;&rsaquo;</span></a>
                <ul>
                  <li><a href="#">Level3</a></li>
                  <li><a href="#">Level3</a></li>
                  <li><a href="#">Level2</a></li>
                  <li><a href="#">Level3</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Drop4</a></li>
        </ul>
      </li>
      <li><a href="#">Social<span id="arrow"> &nbsp;&nbsp;&rsaquo;&rsaquo;</span></a>
        <ul>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Vkontakte</a></li>
          <li><a href="#">Google Plus</a></li>
          <li><a href="#">Facebook</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
    <span id="det">Vertical menu</span>
  </div>
</body>
</html>

body{
  background: #D2D2D2;
}
#nav{
}
ul#navbar{
  list-style-type: none;
}
ul#navbar li{
  display: block;
  width: 180px;
  background: #002B55;
  border: 1px solid #4B4B4B;
  border-left: 4px solid #808000;
}
ul#navbar li a{
  display: block;
  color: #ffffff;
  font-size: 1.2em;
  padding: 20px 0 10px 40px;
  text-decoration: none;
  transition:all 0.3s ease;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  -o-transition:all 0.3s ease;
}
ul#navbar li a:hover{
  padding-left: 50px;
  background: #008080;
}


ul#navbar > li > ul{
  display: none;
}
ul#navbar > li:nth-child(2):hover > ul{
  position: absolute;
  display: block;
  left: 242px;
  top: 71px;
}
ul#navbar > li:nth-child(2) > ul > li{
  margin-left: -50px;
  background: #D50000;
  border: 1px solid #4B4B4B;
  border-left: 2px solid #002B55;
}
ul#navbar > li:nth-child(2) > ul > li > a:hover{
  padding-left: 50px;
  background: #800055;
  border-left: 4px solid #808000;
}


ul#navbar > li:nth-child(3):hover > ul{
  position: absolute;
  display: block;
  left: 242px;
  top: 122px;
}
ul#navbar > li:nth-child(3):hover > ul > li{
  margin-left: -50px;
  background: #D50000;
  border: 1px solid #4B4B4B;
  border-left: 2px solid #002B55;
}
ul#navbar > li:nth-child(3):hover > ul > li> a:hover{
  padding-left: 45px;
  background: #00AAFF;
  border-left: 4px solid #808000;
}
ul#navbar > li:nth-child(3) > ul > li:first-child > a:hover{
  background: #00AAFF;
}
ul#navbar > li:nth-child(3) > ul > li:nth-child(2)> a:hover{
  background: #002AD5;
}
ul#navbar > li:nth-child(3) > ul > li:nth-child(3)> a:hover{
  background: #F74D22;
}
ul#navbar > li:nth-child(3) > ul > li:last-child> a:hover{
  background: #2222F7;
}


ul#navbar > li > ul > li > ul{
  display: none;
}
ul#navbar > li > ul > li:first-child:hover > ul{
  position: absolute;
  display: block;
  left: 182px;
  top: 0px;
}
ul#navbar > li > ul > li:first-child > ul > li{
  margin-left: -50px;
  background: #00AA80;
  border: 1px solid #4B4B4B;
  border-left: 2px solid #002B55;
}

ul#navbar > li > ul > li:nth-child(2):hover > ul{
  position: absolute;
  display: block;
  left: 182px;
  top: 53px;
}
ul#navbar > li > ul > li:nth-child(2) > ul > li{
  margin-left: -50px;
  background: #D58000;
  border: 1px solid #4B4B4B;
  border-left: 2px solid #002B55;
}

ul#navbar > li > ul > li:nth-child(3):hover > ul{
  position: absolute;
  display: block;
  left: 182px;
  top: 107px;
}
ul#navbar > li > ul > li:nth-child(3) > ul > li{
  margin-left: -50px;
  background: #D50055;
  border: 1px solid #4B4B4B;
  border-left: 2px solid #002B55;
}
ul#navbar > li > ul > li > ul > li > a:hover{
  padding-left: 50px;
  background: #00802B;
  border-left: 4px solid #D50000;
}
ul#navbar > li > ul > li > ul > li:last-child:hover > a:hover{
  padding-left: 30px;
  background: #00802B;
  border-left: 4px solid #D50000;
}


ul#navbar > li > ul > li > ul > li > ul{
  display: none;
}
ul#navbar > li > ul > li > ul > li:last-child:hover > ul{
  background: red;
  position: absolute;
  display: block;
  left: 182px;
  top: 215px;
}
ul#navbar > li > ul > li > ul > li > ul > li{
  margin-left: -50px;
  background: #550055;
  border: 1px solid #4B4B4B;
  border-left: px solid #002B55;
}
ul#navbar > li > ul > li > ul > li:last-child:hover > ul > li >a:hover{
  padding-left: 50px;
  background: #FF5500;
  border-left: 4px solid #FF00D5;
}

#arrow{
  font-size: 1em;
  margin-left: 40px;
  animation: arrow 2s infinite ease;
  -webkit-animation: arrow 2s infinite ease;
  -moz-animation: arrow 2s infinite ease;
  -o-animation: arrow 2s infinite ease;
}
@keyframes arrow{
  0%{
    margin-left: 40px;
  }
  50%{
    margin-left: 30px;
  }
  100%{
    margin-left: 40px;
  }
}
@-webkit-keyframes arrow{
  0%{
    margin-left: 40px;
  }
  50%{
    margin-left: 30px;
  }
  100%{
    margin-left: 40px;
  }
}
@-moz-keyframes arrow{
  0%{
    margin-left: 40px;
  }
  50%{
    margin-left: 30px;
  }
  100%{
    margin-left: 40px;
  }
}
@-o-keyframes arrow{
  0%{
    margin-left: 40px;
  }
  50%{
    margin-left: 30px;
  }
  100%{
    margin-left: 40px;
  }
}
#det{
  position: absolute;
  top: 0;
  left: 500px;
  font-size: 4em;
  text-shadow: 2px 2px 10px #000000;
}

This Pen is owned by Abhishek Patel on CodePen.

See more by @ahse on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.