How to make submenu appear to the left, instead of to the right

Question

I have a bootstrap 4 menu, with a submenu. The submenu displays to the right of the menu menu as expected.

However, the menu is on the far right of the screen. So the menu is cut off on the right side.

Is there a way to make the menu appear on the left of the main menu, instead of to the right?

html:

<div class="dropdown dropdown-user-menu">
                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-option-vertical"></span>
                </button>
                <div class="dropdown dropdown-menu dropdown-typical dropdown-menu-right">
                    <a repeat.for="item of statusTypes" click.delegate="editProgramStatus(item)" class="dropdown-item">${item.name}</a>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-more">
                        <div class="dropdown-more-caption">Choose color...</div>
                        <div class="dropdown-more-sub">
                            <div class="dropdown-more-sub-in">
                                <a class="dropdown-item" href="#"><span class="font-icon font-icon-home"></span>Quant and Verbal</a>
                                <a class="dropdown-item" href="#"><span class="font-icon font-icon-cart"></span>Real Gmat Test</a>
                                <a class="dropdown-item" href="#"><span class="font-icon font-icon-speed"></span>Prep Official App</a>
                                <a class="dropdown-item" href="#"><span class="font-icon font-icon-users"></span>CATprer Test</a>
                                <a class="dropdown-item" href="#"><span class="font-icon font-icon-comments"></span>Third Party Test</a>
                            </div>
                        </div>
                    </div>

                </div>


            </div>

css:

     .dropdown-menu {
  border-color: #d8e2e7;
  margin-top: 6px;
  font-size: 0.8125rem /*13/16*/;
}
.dropup .dropdown-menu {
  margin-bottom: 6px;
}
.dropdown-menu-col {
  float: left;
  width: 50%;
}
.dropdown-header,
.dropdown-item {
  padding: 4px 12px;
}
.dropdown-header {
  text-transform: uppercase;
  font-weight: 600;
  color: #6c7a86;
  font-size: 0.875rem /*14/16*/;
}
.dropdown-item {
  font-size: 0.9375rem /*15/16*/;
}
.dropdown-item .font-icon {
  margin: 0 8px 0 0;
  color: #adb7be;
  transition: all 0.2s ease-in-out;
  font-size: 16px;
  vertical-align: middle;
  line-height: 16px;
  position: relative;
  top: -1px;
}
.dropdown-item:hover,
.dropdown-item.current {
  background: none;
  color: #00a8ff;
}
.dropdown-item:hover .font-icon,
.dropdown-item.current .font-icon {
  color: #00a8ff;
}
.dropdown-item.no-nowrap {
  white-space: normal;
  line-height: 1.3;
}
.dropdown.dropdown-typical {
  position: relative;
}
.dropdown.dropdown-typical a.dropdown-toggle {
  color: #343434;
  font-weight: 600;
  padding-right: 15px;
  padding-left: 15px;
}
.dropdown.dropdown-typical a.dropdown-toggle:after,
.dropdown.dropdown-typical a.dropdown-toggle .font-icon {
  transition: all 0.2s ease-in-out;
}
.dropdown.dropdown-typical a.dropdown-toggle:after {
  color: #adb7be;
  border-top: 5px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  position: relative;
  top: -1px;
}
.dropdown.dropdown-typical a.dropdown-toggle .font-icon {
  vertical-align: middle;
  margin: 0 6px 0 0;
  color: #adb7be;
  font-size: 16px;
  line-height: 16px;
  position: relative;
  top: -1px;
}
.dropdown.dropdown-typical a.dropdown-toggle.dropdown-toggle-txt {
  font-weight: 400;
  color: #00a8ff;
  font-size: 0.9375rem /*15/16*/;
}
.dropdown.dropdown-typical a.dropdown-toggle.dropdown-toggle-txt:after {
  display: none;
}
.dropdown.dropdown-typical.open a.dropdown-toggle,
.dropdown.dropdown-typical a.dropdown-toggle:hover {
  color: #00a8ff;
}
.dropdown.dropdown-typical.open a.dropdown-toggle:after,
.dropdown.dropdown-typical a.dropdown-toggle:hover:after,
.dropdown.dropdown-typical.open a.dropdown-toggle .font-icon,
.dropdown.dropdown-typical a.dropdown-toggle:hover .font-icon {
  color: #00a8ff;
}
.dropdown.dropdown-typical .dropdown-header,
.dropdown.dropdown-typical .dropdown-item {
  padding: 3px 14px;
}
.dropdown.dropdown-typical .dropdown-item {
  font-size: 0.9375rem /*15/16*/;
}
.dropdown.dropdown-typical .dropdown-menu {
  margin-top: 2px;
  min-width: 100%;
}
.dropdown.dropdown-typical .dropdown-more {
  position: relative;
}
.dropdown.dropdown-typical .dropdown-more .dropdown-more-caption {
  padding: 3px 12px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  position: relative;
  font-size: 15px;
}
.dropdown.dropdown-typical .dropdown-more .dropdown-more-caption:before {
  content: '';
  display: block;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 5px;
  border-color: transparent transparent transparent #adb7be;
  transition: all 0.2s ease-in-out;
}
.dropdown.dropdown-typical .dropdown-more .dropdown-more-caption.padding {
  padding-left: 37px;
}
.dropdown.dropdown-typical .dropdown-more .dropdown-more-sub {
  display: none;
  position: absolute;
  top: -4px;
  left: 100%;
  padding: 0 0 0 4px;
  margin: 0 0 0 -3px;
}
.dropdown.dropdown-typical .dropdown-more .dropdown-more-sub-in {
  background: #fff;
  border: solid 1px #d8e2e7;
  border-left: none;
  border-radius: 0 3px 3px 0;
  padding-top: 4px;
  padding-bottom: 4px;
}
.dropdown.dropdown-typical .dropdown-more:hover .dropdown-more-caption {
  color: #00a8ff;
}
.dropdown.dropdown-typical .dropdown-more:hover .dropdown-more-caption:before {
  border-left-color: #00a8ff;
}
.dropdown.dropdown-typical .dropdown-more:hover .dropdown-more-sub {
  display: block;
}
.dropdown.dropdown-status {
  display: inline-block;
}
.dropdown.dropdown-status .btn.dropdown-toggle {
  height: 22px;
  font-size: 0.8125rem /*13/16*/;
  padding: 0 7px;
}
.dropdown.dropdown-status .btn.dropdown-toggle.btn-danger {
  background-color: #fa424a !important;
  border-color: #fa424a !important;
}
.dropdown.dropdown-status .btn.dropdown-toggle.btn-primary {
  background-color: #00a8ff !important;
  border-color: #00a8ff !important;
}
.dropdown.dropdown-status .btn.dropdown-toggle.btn-success {
  background-color: #46c35f !important;
  border-color: #46c35f !important;
}
.dropdown.dropdown-status .btn.dropdown-toggle.btn-warning {
  background-color: #f29824 !important;
  border-color: #f29824 !important;
}
.dropdown.dropdown-status .dropdown-menu {
  margin-left: -5px;
}
.dropdown.dropdown-status .dropdown-menu a.dropdown-item {
  font-weight: 400;
  border: none;
}
.dropdown-toggle .caret {
  display: none;
}

EDIT: I found this works well.

<div style="left: -95%;" class="dropdown-more-sub">
                        <div class="dropdown-more-sub-in">
                            <a class="dropdown-item" href="#"><span class="font-icon font-icon-home"></span>Quant and Verbal</a>
                            <a class="dropdown-item" href="#"><span class="font-icon font-icon-cart"></span>Real Gmat Test</a>
                            <a class="dropdown-item" href="#"><span class="font-icon font-icon-speed"></span>Prep Official App</a>
                            <a class="dropdown-item" href="#"><span class="font-icon font-icon-users"></span>CATprer Test</a>
                            <a class="dropdown-item" href="#"><span class="font-icon font-icon-comments"></span>Third Party Test</a>
                        </div>
                    </div>

Answer 1

I came up with an interesting answer: set left to negative 95%.

This seems to work great.

Answer 2

dropdown-menu-right 

You probably have to delete this class