Header nav bar context menus

css/layouts/cp2/example-sidebar-1.html

@@ -23,8 +23,14 @@
 							</svg>
 						</a>
 						<ul class="navbar-nav closed" id="navbarCollapse">
-							<li class="nav-item">
+							<li class="nav-item dropdown">
 								<a href="#" class="nav-link">Item 1</a>
+								<div class="dropdown-menu">
+									<a class="dropdown-item" href="#">Sub Menu Item 1</a>
+									<a class="dropdown-item" href="#">Sub Menu Item 2</a>
+									<div class="dropdown-divider"></div>
+									<a class="dropdown-item" href="#">Sub Menu Item 3</a>
+								</div>
 							</li>
 							<li class="nav-item">
 								<a href="#" class="nav-link">Item 2</a>
@@ -35,8 +41,14 @@
 							<li class="nav-item">
 								<a href="#" class="nav-link">Item 4</a>
 							</li>
-							<li class="nav-item right">
+							<li class="nav-item right dropdown">
 								<a href="#" class="nav-link">Item 5</a>
+								<div class="dropdown-menu">
+									<a class="dropdown-item" href="#">Sub Menu Item 1</a>
+									<a class="dropdown-item" href="#">Sub Menu Item 2</a>
+									<div class="dropdown-divider"></div>
+									<a class="dropdown-item" href="#">Sub Menu Item 3</a>
+								</div>
 							</li>
 						</ul>
 					</div>

css/layouts/cp2/navbar.css

@@ -79,6 +79,23 @@ header nav {
 	text-decoration: none;
 }
 
+.dropdown-item {
+	border-top: 1px solid #35689c;
+	color: rgba(255, 255, 255, .75);
+	display: block;
+	padding: 8px 15px;
+	padding-left: 30px;
+}
+
+.dropdown-item:hover {
+	color: rgba(255, 255, 255, 1);
+	text-decoration: none;
+}
+
+.dropdown-divider {
+	display: none;
+}
+
 @media (min-width: 768px) {
 	.navbar-toggle {
 		display: none;
@@ -111,4 +128,65 @@ header nav {
 		line-height: 20px;
 		padding: 17px 15px;
 	}
+
+	.dropdown {
+		position: relative;
+	}
+
+	.dropdown-menu {
+		background-clip: padding-box;
+		background-color: #fff;
+		border-radius: 0.25rem;
+		border: 1px solid rgba(0, 0, 0, .15);
+		color: #212529;
+		display: none;
+		font-size: 1rem;
+		margin-left: 15px;
+		margin-top: -15px;
+		min-width: 10rem;
+		padding-left: 0px;
+		padding: 0.5rem 0;
+		position: absolute;
+		text-align: left;
+		top: 100%;
+		z-index: 1000;
+	}
+	
+	.dropdown:hover .dropdown-menu {
+		display: block;
+	}
+
+	.dropdown-item {
+		background-color: transparent;
+		border: 0;
+		clear: both;
+		color: #212529;
+		display: block;
+		font-weight: 400;
+		padding: 0.25rem 1.5rem;
+		text-align: inherit;
+		white-space: nowrap;
+		width: 100%;
+	}
+
+	.dropdown-item:hover {
+		background-color: #f1f1f1;
+		color: #16181b;
+		text-decoration: none;
+	}
+
+	.dropdown-divider {
+		border-top: 1px solid #e9ecef;
+		display: block;
+		height: 0;
+		margin: 0.5rem 0;
+		overflow: hidden;
+	}
+
+	.right .dropdown-menu {
+		left: auto;
+		margin-left: 0;
+		margin-right: 15px;
+		right: 0;
+	}
 }