стоп-лист раскрывающийся список выпадающего экрана

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; 
}