<p class="note">To navigate to a destination, click / touch the <em>text</em> <br>To open a submenu, click / touch the <em>'>' caret</em> :)</p>
<aside class="sidebar">
	<div id="leftside-navigation">
		<ul class="level-0">
			<li class="parent">
				<a href="#"><span>Wingardium Leviosa</span><i class="arrow fa fa-angle-right"></i></a>
				<ul class="level-1">
					<li class="parent">
						<a href="#"><span>Hermione Granger</span><i class="arrow fa fa-angle-right"></i></a>
						<ul class="level-2">
							<li>
								<a href="#">Gringotts</a>
							</li>
							<li>
								<a href="#">Platform 9 ¾</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Rubeus Hagrid</a>
					</li>
					<li class="parent">
						<a href="#"><span>Peter Pettigrew</span><i class="arrow fa fa-angle-right"></i></a>
						<ul class="level-2">
							<li>
								<a href="#">Hogwarts</a>
							</li>
							<li>
								<a href="#">Malfoy Mansion</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Nagini</a>
					</li>
				</ul>
			</li>
			<li class="parent">
				<a href="#"><span>Expecto Patronum</span><i class="arrow fa fa-angle-right"></i></a>
				<ul class="level-1">
					<li class="parent">
						<a href="#"><span>Sirius Black</span><i class="arrow fa fa-angle-right"></i></a>
						<ul class="level-2">
							<li>
								<a href="#">Azkaban</a>
							</li>
							<li>
								<a href="#">Chamber of Secrets</a>
							</li>
						</ul>
					</li>

					<li>
						<a href="#">James Potter</a>
					</li>
				</ul>
			</li>
			<li class="parent">
				<a href="#"><span>Stupefy</span><i class="arrow fa fa-angle-right"></i></a>
				<ul class="level-1">
					<li class="parent">
						<a href="#"><span>Bellatrix Lestrange</span><i class="arrow fa fa-angle-right"></i></a>
						<ul class="level-2">
							<li>
								<a href="#">The Burrow</a>
							</li>
							<li>
								<a href="#">Hogsmeade</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Remus Lupin</a>
					</li>
					<li class="parent">
						<a href="#"><span>Luna Lovegood</span><i class="arrow fa fa-angle-right"></i></a>
						<ul class="level-2">
							<li>
								<a href="#">Number 4 Privet Drive</a>
							</li>
							<li>
								<a href="#">The Hog's Head Inn</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Harry Potter</a>
					</li>
					<li class="parent">
						<a href="#"><span>Dobby</span><i class="arrow fa fa-angle-right"></i></a>
						<ul class="level-2">
							<li>
								<a href="#">The Three Broomsticks</a>
							</li>
							<li>
								<a href="#">Honeyduke's Sweetshop</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Ron Weasley</a>
					</li>
				</ul>
			</li>
			<li class="parent">
				<a href="#"><span>Obliviate</span><i class="arrow fa fa-angle-right"></i></a>
				<ul class="level-1">
					<li class="parent">
						<a href="#"><span>Severus Snape</span><i class="arrow fa fa-angle-right"></i></a>
						<ul class="level-2">
							<li>
								<a href="#">Forest of Dean</a>
							</li>
							<li>
								<a href="#">Godric's Hollow</a>
							</li>
						</ul>
					</li>

					<li>
						<a href="#">Draco Malfoy</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</aside>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
@import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');

.note {
  color:#ccc;
  margin: 50px 25px 75px;
  em {
    font-weight:bold;
    font-style:normal;
    color:#fff;
  }
}

aside {
  margin-left: 25px;
}

body {
  color: #5D5F63;
  background: #293149;
  font-family: 'Open Sans',sans-serif;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sidebar {
  #leftside-navigation {
    ul {
      margin: 0;
      padding: 0;
      display:inline-block;
      li {
        display: block;
        width: 100%;
        vertical-align: middle;
        list-style-type: none;
        border-bottom: 1px solid rgba(255,255,255,.05);
        &.open > a > i {
          transform: rotate(90deg);
          &:not(:hover) {
            color:#f3ff09;  
          }
        }
        
        a {
          position: relative;
          width: 100%;
          display: block;
          color: #aeb2b7;
          text-decoration: none;
          width: 100%;
          padding: 14px 60px 14px 25px;
          box-sizing: border-box;
          font-size: 16px;
          line-height:22px;
          outline: 0;
          &:hover {
            color: #f3ff09;
          }
          span {
            display: inline-block;
          }
          i {
            top: 0;
            right:0;
            width: 50px;
            height:50px;
            line-height: 50px;
            text-align: center;
            display:block;
            position:absolute;
            touch-action: manipulation;
            &:hover {
              background-color: #f3ff09;
              color: #000;
            }
            .fa-angle-left, .fa-angle-right {
              padding-top: 3px;
            }
          }
        }
      }
    }
    ul ul {
      display: none;
      background-color: rgba(0,0,0,0.2);
      li {
        border-bottom: none;
      }
    }
  }
}
View Compiled
$("#leftside-navigation .parent > a > i").click(function(e) {
  e.preventDefault();
  var toClose = $("#leftside-navigation ul").not($(this).parents("ul"));
  toClose.slideUp();
  toClose.parent().removeClass("open");
  if(!$(this).parent().next().is(":visible")) {
    var toOpen = $(this).parent().next()
    toOpen.slideDown();
    toOpen.parent().not(".open").addClass("open");
  }  
  e.stopPropagation();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js