"Pure CSS Bootstrap 4 Cascading Drop Down Menu"
Bootstrap 4.1.1 Snippet by blayderunner123

<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: ''; }

Related: See More


Questions / Comments: