Update

Author: accgit

src/css/style.menu.css

@@ -74,9 +74,23 @@
 
 .sidebar ul.menu li ul li ul {
     padding-left: 10px;
+         display: none;
           margin: 15px 10px;
 }
 
+.sidebar ul.menu li ul li.parent:before {
+     font-family: "FontAwesome";
+         content: "\f106";
+	  margin: 0 15px 0 0;
+	  height: 10px;
+	   width: 10px;
+	   float: right;
+}
+
+.sidebar ul.menu li ul li.parent.active:before {
+         content: "\f107";
+}
+
 /*
     perfect scrollbar
 */

src/css/style.menu.light.css

@@ -35,6 +35,10 @@
                color: #494949;
 }
 
+.sidebar ul.menu li ul li.parent.active:before {
+    color: #494949;
+}
+
 .sidebar ul.menu li ul li ul {
      border-left: 1px solid #e9e9e9;
 }

src/index.html

@@ -51,43 +51,44 @@
 					<li>
 						<span class="name">Dashboard</span>
 						<ul>
-						    	<li><a href="">Home</a></li>
-							<li><a href="" class="current">Settings</a>
-								<ul>
-									<li><a href="">Timezone</a></li>
-									<li><a href="">Permissions</a></li>
-									<li><a href="">Maintenance</a></li>
+						    	<li><a href="#">Home</a></li>
+							<li class="parent">
+								<a href="#">Settings</a>
+								<ul class="submenu">
+									<li><a href="#">Timezone</a></li>
+									<li><a href="#">Permissions</a></li>
+									<li><a href="#">Maintenance</a></li>
 								</ul>
 							</li>
-							<li><a href="">Notifications<span class="notifi">3</span></a></li>
+							<li><a href="#">Notifications<span class="notifi">3</span></a></li>
 						</ul>
 					</li>
 
 					<!-- blog -->
 					<li>
 						<span class="name">Blog</span>
 						<ul>
-						    	<li><a href="">Add</a></li>
-							<li><a href="">List</a></li>
+						    	<li><a href="#">Add</a></li>
+							<li><a href="#">List</a></li>
 						</ul>
 					</li>
 
 					<!-- members -->
 					<li>
 						<span class="name">Members</span>
 						<ul>
-						    	<li><a href="">Registred</a></li>
-							<li><a href="">Banned</a></li>
+						    	<li><a href="#">Registred</a></li>
+							<li><a href="#">Banned</a></li>
 						</ul>
 					</li>
 
 					<!-- gallery -->
 					<li>
 						<span class="name">Gallery</span>
 						<ul>
-							<li><a href="">Design</a></li>
-							<li><a href="">People</a></li>
-							<li><a href="">Cars</a></li>
+							<li><a href="#">Design</a></li>
+							<li><a href="#">People</a></li>
+							<li><a href="#">Cars</a></li>
 						</ul>
 					</li>
 				</ul>
@@ -115,6 +116,12 @@
 					$(window).width() >= 768 ? $(nav).show() : $(nav).hide();
 				});
 			});
+
+			// click submenu
+			$('ul.menu a').on('click', function() {
+				$(this).parent('li.parent').toggleClass('active');
+				$(this).parent().find('ul.submenu').slideToggle('fast');
+			});
 		});
 	</script>
 </body>