Make the boot menu or submenu visible on the left side if it extends outside the browser

Check FIDDLE , as you can see there are several dropdown menus, please resize your browser so that the "Dropdown" menu appears on the right. Then go to the "2nd level" menu, as you can see the submenus open on the right side, so they are not completely visible. While we have some space on the left, is there a way to make the submenu visible on the left if it goes off-screen.

What it looks like:

So this is what I want to achieve:

• How do I detect certain menus outside of the browser?
• Once discovered, How to reverse it so the user can see it.

How should it behave if there is not enough space in the right submenu in the menu on the right, the menus will be shown on the left:

Html

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
    <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret">        </b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
      <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
      <ul class="dropdown-menu sub-menu">
        <li><a href="#">I can be in left side</a></li>
        <li><a href="#">Why i am coming on right side</a></li>
        <li><a href="#">I want to come in Left side</a></li>
        <li><a href="#">Enough space in left</a></li>
        <li><a href="#">I will not be visible as i am long</a></li>
      </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
</ul>