(function() {
'use strict';
angular.module('dropdown-example', ['ui.bootstrap'])
.config(Configuration)
.controller('mainController', MainController);
Configuration.$inject = ['$stateProvider'];
function Configuration($stateProvider) {
}
function MainController() {
var vm = this;
}
}());
<!DOCTYPE html>
<html ng-app="dropdown-example">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="container-fluid">
<div class="table-responsive">
<table class="table">
<tr>
<th>Actions</th>
<th>Stuff</th>
<th>Other Stuff</th>
</tr>
<tr>
<td>
<span uib-dropdown dropdown-append-to-body="true">
<button class="btn btn-default btn-xs" type="button" uib-dropdown-toggle>
MORE
</button>
<div uib-dropdown-menu role="menu" class="indirect-dropdown-menu-content">
<a href="#" class="dropdown-item">Tax Jurisdictions</a>
<a href="#" class="dropdown-item">Products and Services Mapping</a>
<a href="#" class="dropdown-item">Exemption Certificates</a>
<a href="#" class="dropdown-item">Test Scenarios</a>
<a href="#" class="dropdown-item">Conditional Mappings</a>
<a href="#" class="dropdown-item">Custom Tax Categories</a>
<a href="#" class="dropdown-item">Tax Code Mappings</a>
<a href="#" class="dropdown-item">Data Lists</a>
<a href="#" class="dropdown-item">Custom Fields</a>
<a href="#" class="dropdown-item">Change History</a>
</div>
</span>
</td>
<td>Stuff</td>
<td>More Stuff</td>
</tr>
</table>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</body>
</html>
.indirect-dropdown-menu-content {
background-color: #fff;
border: solid 1px #C6C6D1;
}
.indirect-dropdown-menu-content .dropdown-menu:before {
border-bottom-color: #C6C6D1;
border-width: 10px;
width: 20px;
height: 10px;
top: -10px;
left: 112px;
border-top-width: 0;
}
.indirect-dropdown-menu-content .dropdown-menu:after {
border-bottom-color: #C6C6D1;
border-width: 9px;
width: 18px;
height: 9px;
top: -9px;
left: 113px;
border-top-width: 0;
}
.indirect-dropdown-menu-content a {
display: block;
color: #7E8283;
text-decoration: none;
padding: 10px 20px 10px 20px;
}
.indirect-dropdown-menu-content a:hover {
background-color: #E0F1F8;
color: #000;
}