스톱 목록 드롭 다운 오프 스크린

Question

내 탐색 바의 드롭 다운 메뉴에 HTML 목록을 사용하고 있습니다. 문제는 브라우저 창 크기가 작 으면 드롭 다운이 화면 왼쪽에서 왼쪽으로가는 것입니다.

작은 화면 크기에서 100 %에 걸쳐 콘텐츠를 중앙에 배치하고 스트레치하는 가장 좋은 방법은 궁금합니다.

문제는 알림 메뉴 (작은 봉투 위로 마우스를 가져 가면)입니다. 맨 오른쪽 항목 위에 http://codepen.io/anon/pen/eBeYXd

호버과 메뉴가 나타 브라우저에게 모바일 화면의 크기를 만들 것입니다 :

내가 당신에게 아이디어를 제공하는 사이트에서 빼낸 몇 가지 코드를 넣었습니다 왼쪽에있는 드롭 다운이 잘리는 지 확인하십시오. 아래

코드 :

<div class="navigation-main"> 
     <div class="container group"> 
      <ul class="header-navbar"> 
       <!-- notes test --> 
       <li class="dropdown pull-right alerts-box"> 
<a href="#" onclick="return false;"><img src="/templates/default/images/comments/envelope.png" alt=""/> <span class="badge badge-important">1</span> <b class="caret"></b></a> 
<ul class="dropdown-menu"> 
    <li><a href="/index.php?module=articles_full&aid=3&clear_note=9"><strong>liamdawe</strong> replied to "test a test test a test test a test test a test te&hellip;</a>"</li> 
    <li class="divider"></li><li><a href="/usercp.php?module=notifications&go=clear">Clear all</a></li> 
    <li class="divider"></li> 
    <li><a href="/usercp.php?module=notifications">See all</a></li> 
</ul> 
</li> 
<!-- notes test --> 
      </ul> 
     </div> 
    </div> 

CSS 코드 : 최소 폭

*, *:before, *:after { 
    box-sizing: inherit; 
} 
.navigation-main { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 49px; 
    z-index: 10001; 
    background-color: #222; 
} 
.header-navbar { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.header-navbar>li { 
    float: left; 
} 
.header-navbar>.pull-right { 
    float: right; 
} 
.header-navbar>li>a { 
    display: block; 
    color: #999; 
    padding: 14px; 
} 
.header-navbar>.active>a { 
    color: #FFF; 
    background-color: #000; 
} 
.header-navbar>li>a:hover { 
    color: #FFF; 
    text-decoration: none; 
} 
.header-navbar>.header-brand>a { 
    line-height: 0; 
    padding: 9px 14px; 
    margin-left: -14px; 
} 
.header-search { 
    padding: 9px 0; 
} 
.header-search .search-field { 
    width: auto; 
    background-color: #333; 
    border: 1px solid #5c5c5c; 
    outline: none; 
    line-height: 19px; 
    height: 30px; 
    color: #fff; 
    margin: 0; 
} 
.dropdown:hover .dropdown-menu { 
    display: block; 
} 
.header .dropdown-menu { 
    border-top-width: 1px; 
} 
.header .dropdown:hover .caret { 
    border-top-color: #FFF; 
} 
.header-avatar { 
    padding: 9px 0 9px 14px; 
} 
.dropdown { 
    position: relative; 
} 
.caret { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    vertical-align: middle; 
    border-top: 4px solid #999; 
    border-right: 4px solid transparent; 
    border-left: 4px solid transparent; 
    content: "" 
} 
.dropdown-menu { 
    position: absolute; 
    top: 49px; 
    left: 0; 
    z-index: 999; 
    float: left; 
    min-width: 160px; 
    padding: 5px 0; 
    margin: 0; 
    list-style: none; 
    text-align: left; 
    background-color: #222; 
    border: 1px solid #000; 
    box-shadow: 0 3px 12px rgba(0, 0, 0, .15); 
    display: none; 
} 
.dropdown-menu li {padding: 0 15px 2px;} 
.dropdown-menu .divider { 
    *width: 100%; 
    height: 1px; 
    padding: 0px; 
    margin: 9px 0; 
    *margin: -5px 0 5px; 
    overflow: hidden; 
    background-color: #383838; 
} 
.dropdown-menu a { 
    display: block; 
    clear: both; 
    line-height: 26px; 
    color: #999; 
    white-space: nowrap; 
    padding: 2px; 
} 
.dropdown-menu li>a:hover, .dropdown-menu li>a:focus { 
    text-decoration: none; 
    color: #fff; 
} 
.pull-right .dropdown-menu { 
    right: 0; 
    left: auto; 
} 
.pull-right { 
    float: right; 
} 
.nav-avatar { 
    vertical-align: middle; 
    background-color: #333; 
} 

Answer 1

플레이 : 또는 최대 폭 : 아마도 텍스트이

같은

뭔가를 포장 할 수 있도록

.dropdown-menu a { 
    display: block; 
    clear: both; 
    line-height: 26px; 
    color: #999; 
    min-width: 200px; 
    white-space: wrap; 
    padding: 2px; 
}