停止リストのドロップダウンオフスクリーン

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