After reviewing the Bootstrap documentation for version 3.3.7, I may have overlooked something.
The issue I am facing is that my dropdown menu does not function properly when using the CDN for Bootstrap JS v3.3.6, but it works fine when switched to v3.3.7.
However, upon changing to v3.3.7, my tabs cease to work as expected.
Removing the Bootstrap JS link makes the tabs functional again.
<!doctype html>
<html>
<head>
<title>Quiz App!</title>
<link rel="icon" type="image/png" href="http://plainicon.com/dboard/userprod/2921_4eb4c/prod_thumb/plainicon.com-64851-256px-36c.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 id="header"><span class="glyphicon glyphicon-grain"></span> <small>(in development)</small></h2> </hr>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="/" aria-controls="home2" data-toggle="tab"><span class="glyphicon glyphicon-home"></span></a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Featured Topics<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/topics/us-presidents" data-toggle="tab">U.S. Presidents</a></li>
<li><a href="/topics/business" data-toggle="tab">Business & Investing</a></li>
<li><a href="/topics/astronomy" data-toggle="tab">Astronomy</a></li>
<li><a href="/topics/movies" data-toggle="tab">Movies</a></li>
</ul>
</li>
<li role="presentation"><a href="/all-quizzes" aria-controls="rankings" data-toggle="tab">All Quizzes</span></a></li>
<li role="presentation"><a href="/create-quiz" aria-controls="stats" data-toggle="tab">Create a Quiz</span></a></li>
</ul>
</div>
</div;
{{{body}}}
</div>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
Your assistance in this matter would be greatly appreciated.