относительный элемент из окна просмотра

Question

Почему моя раскрывающаяся панель выйти из окна просмотра http://i.stack.imgur.com/Uth7H.png

и как исправить, так что доза не выйти из окна просмотра и по центру относительно кнопки при posiible

http://i.stack.imgur.com/HHOo9.png

, если это возможно только с помощью CSS

и это HTML

<div class="dropdown-container"> 
     <button class="button-std dropdown"> 
      <span class="glyphicon-home"></span> 
      <span> Dropdown Button</span> 
     </button> 
     <div class="dropdown-positionner"> 
      <div class="dropdown-std"> 
       <a href="#">Link 1</a> 
       <a href="#">Link 2</a> 
       <a href="#">Another Link</a> 
      </div> 
     </div> 
    </div> 

и это CSS

.dropdown-container { 
    position: relative; 
    display: inline-block; 
    white-space: nowrap; 
} 
.dropdown-positionner { 
    position: absolute; 
    left: 50%; 
} 
.dropdown-std { 
    position: relative; 
    display: none; 
    left: -50%; 
} 
.dropdown-container:hover .dropdown-std { 
    display: block; 
} 

Answer 1

Try это (у вас есть отрицательный левый позиции)

.dropdown-container { 
    position: relative; 
    display: inline-block; 
    white-space: nowrap; 
} 
.dropdown-positionner { 
    position: absolute; 
    left: 50%; 
} 
.dropdown-std { 
    position: relative; 
    display: none; 
    left: -50%; 
} 
.dropdown-container:hover .dropdown-std { 
    display: block; 
} 

.dropdown-positionner-edge { 
    left: 0; 
} 

.dropdown-positionner-edge .dropdown-std { 
    left: 0; 
} 

HTML

<div class="dropdown-container"> 
    <button class="button-std dropdown"> 
    <span class="glyphicon-home"></span> 
    <span> Dropdown Button</span> 
    </button> 
    <div class="dropdown-positionner dropdown-positionner-edge"> 
    <div class="dropdown-std"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Another Link</a> 
    </div> 
    </div> 
</div> 



<div class="dropdown-container"> 
    <button class="button-std dropdown"> 
    <span class="glyphicon-home"></span> 
    <span> Dropdown Button</span> 
    </button> 
    <div class="dropdown-positionner"> 
    <div class="dropdown-std"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Another Link</a> 
    </div> 
    </div> 
</div> 

DEMO HERE

Answer 2

Ваш CSS движется его содержимое, здесь работает манящими и CSS содержание:

.dropdown-container { 
     position: relative; 
     display: inline-block; 
     white-space: nowrap; 
    } 
    .dropdown-positionner { 
     position: absolute; 
    } 
    .dropdown-std { 
     position: relative; 
     display: none; 
     left: 0%; 
    } 
    .dropdown-container:hover .dropdown-std { 
     display: block; 
    } 

https://fiddle.jshell.net/j1kvfzzf/