停止列表下拉屏幕

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