如果超出浏览器边缘，则在左侧显示引导菜单或子菜单

Question

Check my FIDDLE , as you can see there are some dropdown menus,please resize the browser in a way that 'Dropdown' menu will come to right side. Then go to '2nd level menu' as you can see submenu are opening in right side, hence they are not visible fully. Although we have space in left-side, is there any way we can make sub-menu visible on left if it's going beyond screen.

How it's looking:

So this is what I want to achieve:

1. How to detect particular menus is going outside the browser edge??
2. After detection How to make it reverse aligned, so that user can see it.

How it should behave, if there is not enough space in right-side to open submenu, menus will be shown in left-side:

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>

Answer 1

你可以用pull-left ，如果在页面右侧的下拉： 小提琴 ，你可以使用一些JS，使其动态浏览器的重新大小，通过计算DIV位置