stop list dropdown going off-screen - html

Question

I am using HTML lists for dropdown menus in my navbar. The problem I have come across is that when the browser window is small, the dropdown goes off-screen to the left.
I am wondering on the best way to simply center it and stretch the content across 100% at a small screensize.
The problem is the notifications menu (hover over the little envelope).
I've put up some code I ripped from the site which gives you an idea: http://codepen.io/anon/pen/eBeYXd
Hover over the far-right item and the menu will appear, make the browser the size of a mobile screen and see the dropdown move off to the left being cut off.
Code below:
<div class="navigation-main">
<div class="container group">
<ul class="header-navbar">
<!-- notes test -->
<li class="dropdown pull-right alerts-box">
<img src="/templates/default/images/comments/envelope.png" alt=""/> <span class="badge badge-important">1</span> <b class="caret"></b>
<ul class="dropdown-menu">
<li><strong>liamdawe</strong> replied to "test a test test a test test a test test a test te…"</li>
<li class="divider"></li><li>Clear all</li>
<li class="divider"></li>
<li>See all</li>
</ul>
</li>
<!-- notes test -->
</ul>
</div>
</div>
CSS code:
*, *: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

play with min-width: or max-width: and probably allow your text to wrap
something like this
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
min-width: 200px;
white-space: wrap;
padding: 2px;
}