保持视口或窗口宽度中的绝对元素(下拉菜单）

<li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DROPDOWN <span class="caret"></span></a>
                  <ul class="dropdown-menu menu-multicolumn">
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title">Multi Page</li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title"></li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title">One Page</li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title"></li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                  </ul>
                </li><!-- End of dropdown -->

Css

 .dropdown-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
display: none;
float: left;
font-size: 14px;
list-style: outside none none;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
text-align: left;
top: 100%;
z-index: 1000;}
.menu-multicolumn {
white-space: nowrap;
width: auto !important;}
.menu-column {
display: inline-block;
float: none;
overflow: hidden;
vertical-align: top;
white-space: normal;
min-width: 190px;}

好的，所以现在我想用javascript来确定下拉菜单元素超出窗口宽度的程度，然后设置与left相同的宽度：-(那个宽度(；，因此，下拉菜单元素将具有灵活的左侧位置，并且将始终在窗口宽度内。

基本上，我需要确定有多少元素超出了窗口宽度，然后将相同的量设置为减去该元素的左绝对位置。