Bootstrap Snippets, Bootstrap Tree View, Parent and Child View, Free Time Learning, Bootstrap Chart

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tree View, Parent and Child View, Free Time Learning, Bootstrap Chart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">  
<script type="text/javascript" src="http://www.freetimelearning.com/js/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: 0 none;
	position: relative;
	-webkit-transition: all ease .4s;
	transition: all ease .4s;
}
.nav {
	margin: 20px auto;
	min-height: auto;
}
.nav ul {
	padding-top: 20px;
	position: relative;
}
.nav li {
	float: left;
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 3px 0 3px;
}
.nav li::before, .nav li::after {
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	border-top: 1px solid black;
	width: 50%;
	height: 20px;
}
.nav li::after {
	right: auto;
	left: 50%;
	border-left: 1px solid black;
}
.nav li:only-child::after, .nav li:only-child::before {
	content: '';
	display: none;
}
.nav li:only-child {
	padding-top: 0;
}
.nav li:first-child::before, .nav li:last-child::after {
	border: 0 none;
}
.nav li:last-child::before {
	border-right: 1px solid black;
	border-radius: 0 5px 0 0;
}
.nav li:first-child::after {
	border-radius: 5px 0 0 0;
}
.nav ul ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 1px solid black;
	width: 0;
	height: 20px;
}
.nav li a {
	border: 1px solid #00a0d6;
	padding: 6px 15px;
	text-decoration: none;
	text-transform: uppercase;
	color: black;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
	border-radius: 2px;
}
.nav li a:hover, .nav li a:hover ul li a {
	background:#0390bf;
	color: #FFF;
	border: 1px solid #94a0b4;
}
.active{ background:#00a0d6; color:#FFF !impotant;}

</style>

<nav class="nav">
	<ul>
		<li align="center">
			<a href="#" class="active"><span style="color:#FFF;">F T L</span></a>
			<ul>
				<li><a href="#">HTML Backgrounds and Colors</a>
					<ul>
						<li><a href="#">Backgrounds</a>
							<ul>
								<li><a href="#">BG Images</a>
									<ul>
										<li><a href="#">Dark</a></li>
										<li><a href="#">Light</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li><a href="#">Colors</a>
							<ul>
								<li><a href="#">Text Color</a>
									<ul>
										<li><a href="#">Link Color</a></li>
										<li><a href="#">Font Color</a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				
				<li>
					<a href="#">Projects</a>
					<ul>
						<li><a href="#">PHP</a>
							<ul>
								<li><a href="#">Proj 1</a></li>
								<li><a href="#">Proj 2</a></li>
							</ul>
						</li>
						<li><a href="#">Java</a>
							<ul>
								<li><a href="#">Proj 1</a></li>
								<li><a href="#">Proj 2</a></li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</nav>
</div>

</body>
</html>