diff --git a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
index a28ee81f0b..118c50b4dd 100644
--- a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
+++ b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
@@ -42,8 +42,8 @@
             <ul class="nav navbar-nav">
               <li class="active"><a translate href="#">Active</a></li>
               <li><a translate href="#">Link</a></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropdown' | translate $} <b class="fa fa-caret-down"></b></a>
+              <li class="dropup">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropup' | translate $} <b class="fa fa-caret-down"></b></a>
                 <ul class="dropdown-menu">
                   <li><a translate href="#">Action</a></li>
                   <li><a translate href="#">Another action</a></li>
@@ -60,9 +60,9 @@
             </form>
             <ul class="nav navbar-nav navbar-right">
               <li><a translate href="#">Link</a></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropdown' | translate $} <b class="fa fa-caret-down"></b></a>
-                <ul class="dropdown-menu">
+              <li class="dropup">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropup' | translate $} <b class="fa fa-caret-down"></b></a>
+                <ul class="dropdown-menu dropdown-menu-right">
                   <li><a translate href="#">Action</a></li>
                   <li><a translate href="#">Another action</a></li>
                   <li><a translate href="#">Something else here</a></li>
@@ -109,7 +109,7 @@
               <li><a translate href="#">Link</a></li>
               <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropdown' | translate $} <b class="fa fa-caret-down"></b></a>
-                <ul class="dropdown-menu">
+                <ul class="dropdown-menu dropdown-menu-right">
                   <li><a translate href="#">Action</a></li>
                   <li><a translate href="#">Another action</a></li>
                   <li><a translate href="#">Something else here</a></li>
diff --git a/openstack_dashboard/static/dashboard/scss/components/_icons.scss b/openstack_dashboard/static/dashboard/scss/components/_icons.scss
index d6fae9a9ee..100d495869 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_icons.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_icons.scss
@@ -9,3 +9,8 @@
 .active > a > .hz-icon-required {
   color: $component-active-color;
 }
+
+// Dropup menus need to reverse the arrow
+.dropup .fa-caret-down {
+  @extend .fa-caret-up;
+}
diff --git a/openstack_dashboard/themes/default/bootstrap/components/_dropdowns.scss b/openstack_dashboard/themes/default/bootstrap/components/_dropdowns.scss
index d2db4544e5..9e493240ca 100644
--- a/openstack_dashboard/themes/default/bootstrap/components/_dropdowns.scss
+++ b/openstack_dashboard/themes/default/bootstrap/components/_dropdowns.scss
@@ -1,4 +1,15 @@
-@mixin dropdown_arrow($size, $offset) {
+@mixin dropdown_arrow($size, $offset, $location, $direction) {
+
+  $opposite_location: 'top';
+  @if $location == 'top' {
+    $opposite_location: 'bottom';
+  }
+
+  $opposite_direction: 'left';
+  @if $direction == 'left' {
+    $opposite_direction: 'right';
+  }
+
   &:before, &:after {
     position: absolute;
     content: '';
@@ -6,41 +17,40 @@
 
   // Defaults the arrow to the left side
   &:before {
-    top: ($size + 1) * -1;
-    left: $offset - 1;
-    border-right: ($size + 1) solid transparent;
-    border-bottom: ($size + 1) solid $dropdown-border;
-    border-left: ($size + 1) solid transparent;
-    border-bottom-color: rgba(0, 0, 0, 0.2);
+    #{$location}: ($size + 1) * -1;
+    #{$direction}: $offset - 1;
+    #{$opposite_location}: auto;
+    #{$opposite_direction}: auto;
+    border-#{$opposite_direction}: ($size + 1) solid transparent;
+    border-#{$opposite_location}: ($size + 1) solid $dropdown-border;
+    border-#{$direction}: ($size + 1) solid transparent;
+    border-#{$location}: 0;
+    border-#{$opposite_location}-color: rgba(0, 0, 0, 0.2);
   }
   &:after {
-    top: -$size;
-    left: $offset;
-    border-right: $size solid transparent;
-    border-bottom: $size solid $body-bg;
-    border-left: $size solid transparent;
-  }
-}
-
-@mixin dropdown_arrow_right($size, $offset) {
-  @include dropdown_arrow;
-  &:before, &:after {
-    left: auto;
-  }
-
-  &:before {
-    right: $offset - 1;
-  }
-
-  &:after {
-    right: $offset;
+    #{$location}: -$size;
+    #{$direction}: $offset;
+    #{$opposite_location}: auto;
+    #{$opposite_direction}: auto;
+    border-#{$opposite_direction}: $size solid transparent;
+    border-#{$opposite_location}: $size solid $body-bg;
+    border-#{$direction}: $size solid transparent;
+    border-#{$location}: 0;
   }
 }
 
 .dropdown-menu {
-  @include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset);
+  @include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'top', 'left');
 }
 
 .dropdown-menu-right {
-  @include dropdown_arrow_right($dropdown-arrow-size, $dropdown-arrow-offset);
+  @include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'top', 'right');
+}
+
+.dropup > .dropdown-menu {
+  @include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'bottom', 'left');
+}
+
+.dropup > .dropdown-menu-right {
+  @include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'bottom', 'right');
 }
diff --git a/openstack_dashboard/themes/material/static/horizon/_icons.scss b/openstack_dashboard/themes/material/static/horizon/_icons.scss
index b08a892c29..a6820775ef 100644
--- a/openstack_dashboard/themes/material/static/horizon/_icons.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_icons.scss
@@ -18,6 +18,7 @@ $icon-swap: (
   ban: 'block-helper',
   bars: 'menu',
   bug: 'bug',
+  caret-up: 'menu-up',
   caret-down: 'menu-down',
   check: 'check',
   chevron-down: 'chevron-down',