<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Looking for a Footer of Nav-Pills with a Drop-up for "More"</h2>
I've moved the Footer up a bit in this example to reduce the scrolling<br/>
I want the More button to perform like a drop-up, but I'm unclear where to put the Drop-up class in this context
</div>
<footer class="footer">
<div class="container">
<p class="text-muted credit">
<ul class="nav nav-pills">
<li style="width:15% ;" class="active" onClick="ToggleActivePills(this);"><a href="#"><i class="glyphicon glyphicon-star"></i> Favourites</a></li>
<li style="width:15% ;" ><a href="#" onClick="ToggleActivePills(this);"><i class="glyphicon glyphicon-picture"></i> Option 1</a></li>
<li style="width:15% ;" ><a href="#" onClick="ToggleActivePills(this);"><i class="glyphicon glyphicon-plane"></i> Option 2</a></li>
<li style="width:15% ;"><a href="#" onClick="ToggleActivePills(this);"><i class="glyphicon glyphicon-shopping-cart"></i> Option 3</a></li>
<li style="width:15% ;" class="btn-group">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
More<i class="glyphicon glyphicon-arrow-up"></i>
</a>
<ul class="dropdown-menu drop-up" role="menu">
<li><a href="#" data-toggle-"dropdown">Do Something</a></li>
<li><a href="#" data-toggle-"dropdown">Do Something Else</a></li>
<li><a href="#" data-toggle-"dropdown">Do Something Again</a></li>
</ul>
</li>
</ul>
</p>
</div>
</footer>
</div>
