<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Main Link One</a>
<!-- First Tier Drop Down -->
<ul>
<li class="nav-item"><a class="nav-link" href="#">Link One</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link Two</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link Three</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Main Link Two</a>
<!-- First Tier Drop Down -->
<ul>
<li class="nav-item"><a class="nav-link" href="#">Link One</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link Two</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link Three</a>
<!-- Second Tier Drop Down -->
<ul>
<li class="nav-item"><a class="nav-link" href="#">Link One</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link Two</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link Three</a>
<!-- Third Tier Drop Down -->
<ul>
<li class="nav-item"><a class="nav-link" href="#">Link One</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link Two</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link Three</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Main Link Three</a></li>
<li class="nav-item"><a class="nav-link" href="#">Main Link Four</a></li>
<li class="nav-item"><a class="nav-link" href="#">Main Link Five</a></li>
<li class="nav-item"><a class="nav-link" href="#">Main Link Six</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<section>
<h1 class="text-center text-primary">Pure CSS Bootstrap 4 Cascading Drop Down Menu</h1>
<p clas="text-center"> A simple Bootstrap 4 dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
</section>
</div>
</div>
*, *: before, *:after {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: content-box !important;
}
/* CSS Document */
body {
font-size:22px;
line-height: 32px;
word-wrap:break-word !important;
width: 100%;
height: 100%;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow-x: hidden;
}
html {
width: 100%;
height: 100%;
}
section:first-child{
position:relative;
margin-top:100px;
}
#container {
margin: 0 auto;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li:hover{
font-weight: 500;
}
nav ul li {
background: #007bff;
padding:-15px 0;
}
nav a {
padding:25px 10px;
font-size:20px;
text-decoration:none;
}
nav ul ul li:hover {
background-color: #000000;
font-weight: 500;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 30px; /* the height of the main nav */
padding: 25px 0;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top:-55px;
left:170px;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
