<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"> </br></br></br></br></br></br></br></br></br></br></br> <div class="btn-group dropup"> <button class="btn btn-primary">Moreadsfasdf</button> <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">More</span></button> <ul class="dropdown-menu bullet pull-top pull-right"> <li><a href="#">Separated link</a></li> <li><a href="#">Share via Direct Message</a></li> <li><a href="#">Copy link to Tweet</a></li> <li><a href="#">Embed Tweet</a></li> <li><a href="#">Block</a></li> <li><a href="#">Unblock</a></li> <li><a href="#">Report ad</a></li> </ul> </div> </div> </div>

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-menu .dropdown-link:hover, .dropdown-menu .dropdown-link:focus, .dropdown-menu .dropdown-link.is-focused, .dropdown-menu li:hover .dropdown-link, .dropdown-menu li:focus .dropdown-link, .dropdown-menu .typeahead-recent-search-item.selected, .dropdown-menu .typeahead-saved-search-item.selected, .dropdown-menu .selected a, .dropdown-menu .dropdown-link.selected { background-color: #B40B43 !important; color: #fff; } .dropdown-menu > li > label { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333333; white-space: nowrap; } .dropdown-menu > li > label:hover, .dropdown-menu > li > label:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .dropdown-menu > li > input:checked ~ label, .dropdown-menu > li > input:checked ~ label:hover, .dropdown-menu > li > input:checked ~ label:focus, .dropdown-menu > .active > label, .dropdown-menu > .active > label:hover, .dropdown-menu > .active > label:focus { color: #ffffff; text-decoration: none; outline: 0; background-color: #428bca; } .dropdown-menu > li > input[disabled] ~ label, .dropdown-menu > li > input[disabled] ~ label:hover, .dropdown-menu > li > input[disabled] ~ label:focus, .dropdown-menu > .disabled > label, .dropdown-menu > .disabled > label:hover, .dropdown-menu > .disabled > label:focus { color: #999999; } .dropdown-menu > li > input[disabled] ~ label:hover, .dropdown-menu > li > input[disabled] ~ label:focus, .dropdown-menu > .disabled > label:hover, .dropdown-menu > .disabled > label:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .dropdown-menu > li > label { margin-bottom: 0; cursor: pointer; } .dropdown-menu > li > input[type="radio"], .dropdown-menu > li > input[type="checkbox"] { display: none; position: absolute; top: -9999em; left: -9999em; } .dropdown-menu > li > label:focus, .dropdown-menu > li > input:focus ~ label { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu.pull-top { bottom: 100%; top: auto; margin: 0 0 2px; } .dropdown-menu.pull-center { right: 50%; left: auto; } .dropdown-menu.pull-middle { right: 100%; margin: 0 2px 0 0; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2); left: auto; } .dropdown-menu.pull-middle.pull-right { right: auto; left: 100%; margin: 0 0 0 2px; box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2); } .dropdown-menu.pull-middle.pull-center { right: 50%; margin: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .dropdown-menu.bullet { margin-top: 8px; } .dropdown-menu.bullet:before { width: 0; height: 0; content: ''; display: inline-block; position: absolute; border-color: transparent; border-style: solid; -webkit-transform: rotate(360deg); border-width: 0 7px 7px; border-bottom-color: #cccccc; border-bottom-color: rgba(0, 0, 0, 0.15); top: -7px; left: 9px; } .dropdown-menu.bullet:after { width: 0; height: 0; content: ''; display: inline-block; position: absolute; border-color: transparent; border-style: solid; -webkit-transform: rotate(360deg); border-width: 0 6px 6px; border-bottom-color: #ffffff; top: -6px; left: 10px; } .dropdown-menu.bullet.pull-right:before { left: auto; right: 9px; } .dropdown-menu.bullet.pull-right:after { left: auto; right: 10px; } .dropdown-menu.bullet.pull-top { margin-top: 0; margin-bottom: 8px; } .dropdown-menu.bullet.pull-top:before { top: auto; bottom: -7px; border-bottom-width: 0; border-top-width: 7px; border-top-color: #cccccc; border-top-color: rgba(0, 0, 0, 0.15); } .dropdown-menu.bullet.pull-top:after { top: auto; bottom: -6px; border-bottom: none; border-top-width: 6px; border-top-color: #ffffff; } .dropdown-menu.bullet.pull-center:before { left: auto; right: 50%; margin-right: -7px; } .dropdown-menu.bullet.pull-center:after { left: auto; right: 50%; margin-right: -6px; } .dropdown-menu.bullet.pull-middle { margin-right: 8px; } .dropdown-menu.bullet.pull-middle:before { top: 50%; left: 100%; right: auto; margin-top: -7px; border-right-width: 0; border-bottom-color: transparent; border-top-width: 7px; border-left-color: #cccccc; border-left-color: rgba(0, 0, 0, 0.15); } .dropdown-menu.bullet.pull-middle:after { top: 50%; left: 100%; right: auto; margin-top: -6px; border-right-width: 0; border-bottom-color: transparent; border-top-width: 6px; border-left-color: #ffffff; } .dropdown-menu.bullet.pull-middle.pull-right { margin-right: 0; margin-left: 8px; } .dropdown-menu.bullet.pull-middle.pull-right:before { left: -7px; border-left-width: 0; border-right-width: 7px; border-right-color: #cccccc; border-right-color: rgba(0, 0, 0, 0.15); } .dropdown-menu.bullet.pull-middle.pull-right:after { left: -6px; border-left-width: 0; border-right-width: 6px; border-right-color: #ffffff; } .dropdown-menu.bullet.pull-middle.pull-center { margin-left: 0; margin-right: 0; } .dropdown-menu.bullet.pull-middle.pull-center:before { border: none; display: none; } .dropdown-menu.bullet.pull-middle.pull-center:after { border: none; display: none; } .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-top-left-radius: 0; } .dropdown-submenu > a:before { display: block; float: right; width: 0; height: 0; content: ""; margin-top: 6px; margin-right: -8px; border-width: 4px 0 4px 4px; border-style: solid; border-left-style: dashed; border-top-color: transparent; border-bottom-color: transparent; } @media (max-width: 767px) { .navbar-nav .dropdown-submenu > a:before { margin-top: 8px; border-color: inherit; border-style: solid; border-width: 4px 4px 0; border-left-color: transparent; border-right-color: transparent; } .navbar-nav .dropdown-submenu > a { padding-left: 40px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > label { padding-left: 35px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 45px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 55px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 65px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 75px; } } .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a, .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover, .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus { background-color: #e7e7e7; color: #555555; } @media (max-width: 767px) { .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before { border-top-color: #555555; } } .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a, .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover, .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus { background-color: #080808; color: #ffffff; } @media (max-width: 767px) { .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before { border-top-color: #ffffff; } }

(function(e){function n(b){e(b).on("click"+p,this.toggle)}function q(b,a){if(g){a||(a=[g]);var c;g[0]!==a[0][0]?c=g:(c=a[a.length-1],c.parent().hasClass(k)&&(c=c.parent()));c.find("."+f).removeClass(f);c.hasClass(f)&&c.removeClass(f);c===g&&(g=null,e(l).remove())}}function r(b){var a=b.attr("data-target");a||(a=(a=b.attr("href"))&&/#[A-Za-z]/.test(a)&&a.replace(/.*(?=#[^\s]*$)/,""));return(a=a&&e(a))&&a.length?a:b.parent()}var l=".dropdown-backdrop",k="dropdown-menu",p=".bs.dropdown",f="open",s="ontouchstart"in document.documentElement,g,h=n.prototype;h.toggle=function(b){var a=e(this);if(!a.is(".disabled, :disabled")){var a=r(a),c=a.hasClass(f),d;if(a.hasClass("dropdown-submenu")){for(var m=[a];!d||d.hasClass("dropdown-submenu");)d=(d||a).parent(),d.hasClass(k)&&(d=d.parent()),d.children('[data-toggle="dropdown"]')&&m.unshift(d);d=m}else d=null;q(b,d);if(!c){d||(d=[a]);if(s&&!a.closest(".navbar-nav").length&&!d[0].find(l).length)e('<div class="'+l.substr(1)+'"/>').appendTo(d[0]).on("click",q);b=0;for(a= d.length;b<a;b++)d[b].hasClass(f)||(d[b].addClass(f),c=d[b].children("."+k),m=d[b],c.hasClass("pull-center")&&c.css("margin-right",c.outerWidth()/-2),c.hasClass("pull-middle")&&c.css("margin-top",c.outerHeight()/-2-m.outerHeight()/2));g=d[0]}return!1}};h.keydown=function(b){if(/(38|40|27)/.test(b.keyCode)){var a=e(this);b.preventDefault();b.stopPropagation();if(!a.is(".disabled, :disabled")){var c=r(a),d=c.hasClass("open");if(!d||d&&27==b.keyCode)return 27==b.which&&c.find('[data-toggle="dropdown"]').trigger("focus"), a.trigger("click");a=c.find('li:not(.divider):visible > input:not(disabled) ~ label, [role="menu"] li:not(.divider):visible a, [role="listbox"] li:not(.divider):visible a');a.length&&(c=a.index(a.filter(":focus")),38==b.keyCode&&0<c&&c--,40==b.keyCode&&c<a.length-1&&c++,~c||(c=0),a.eq(c).trigger("focus"))}}};h.change=function(b){var a,c="";a=e(this).closest("."+k);(b=a.parent().find("[data-label-placement]"))&&b.length||(b=a.parent().find('[data-toggle="dropdown"]'));b&&b.length&&!1!==b.data("placeholder")&& (void 0==b.data("placeholder")&&b.data("placeholder",e.trim(b.text())),c=e.data(b[0],"placeholder"),a=a.find("li > input:checked"),a.length&&(c=[],a.each(function(){var a=e(this).parent().find("label").eq(0),b=a.find(".data-label");b.length&&(a=e("<p></p>"),a.append(b.clone()));(a=a.html())&&c.push(e.trim(a))}),c=4>c.length?c.join(", "):c.length+" selected"),a=b.find(".caret"),b.html(c||" "),a.length&&b.append(" ")&&a.appendTo(b))};var t=e.fn.dropdown;e.fn.dropdown=function(b){return this.each(function(){var a= e(this),c=a.data("bs.dropdown");c||a.data("bs.dropdown",c=new n(this));"string"==typeof b&&c[b].call(a)})};e.fn.dropdown.Constructor=n;e.fn.dropdown.clearMenus=function(b){e(l).remove();e("."+f+' [data-toggle="dropdown"]').each(function(){var a=r(e(this)),c={relatedTarget:this};a.hasClass("open")&&(a.trigger(b=e.Event("hide"+p,c)),b.isDefaultPrevented()||a.removeClass("open").trigger("hidden"+p,c))});return this};e.fn.dropdown.noConflict=function(){e.fn.dropdown=t;return this};e(document).off(".bs.dropdown.data-api").on("click.bs.dropdown.data-api", q).on("click.bs.dropdown.data-api",'[data-toggle="dropdown"]',h.toggle).on("click.bs.dropdown.data-api",'.dropdown-menu > li > input[type="checkbox"] ~ label, .dropdown-menu > li > input[type="checkbox"], .dropdown-menu.noclose > li',function(b){b.stopPropagation()}).on("change.bs.dropdown.data-api",'.dropdown-menu > li > input[type="checkbox"], .dropdown-menu > li > input[type="radio"]',h.change).on("keydown.bs.dropdown.data-api",'[data-toggle="dropdown"], [role="menu"], [role="listbox"]',h.keydown)})(jQuery);