title: stop list dropdown going off-screen
body: <p>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.</p>
  
  <p>I am wondering on the best way to simply center it and stretch the content across 100% at a small screensize.</p>
  
  <p>The problem is the notifications menu (hover over the little envelope).</p>
  
  <p>I've put up some code I ripped from the site which gives you an idea: <a href="http://codepen.io/anon/pen/eBeYXd" rel="nofollow noreferrer">http://codepen.io/anon/pen/eBeYXd</a></p>
  
  <p>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.</p>
  
  <p>Code below:</p>
  
  <pre><code>    &lt;div class="navigation-main"&gt;
          &lt;div class="container group"&gt;
              &lt;ul class="header-navbar"&gt;
                  &lt;!-- notes test --&gt;
                  &lt;li class="dropdown pull-right alerts-box"&gt;
  &lt;a href="#" onclick="return false;"&gt;&lt;img src="/templates/default/images/comments/envelope.png" alt=""/&gt; &lt;span class="badge badge-important"&gt;1&lt;/span&gt; &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="/index.php?module=articles_full&amp;aid=3&amp;clear_note=9"&gt;&lt;strong&gt;liamdawe&lt;/strong&gt; replied to "test a test test a test test a test test a test te&amp;hellip;&lt;/a&gt;"&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="/usercp.php?module=notifications&amp;go=clear"&gt;Clear all&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/usercp.php?module=notifications"&gt;See all&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;!-- notes test --&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><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&gt;li {
      float: left;
  }
  .header-navbar&gt;.pull-right {
      float: right;
  }
  .header-navbar&gt;li&gt;a {
      display: block;
      color: #999;
      padding: 14px;
  }
  .header-navbar&gt;.active&gt;a {
      color: #FFF;
      background-color: #000;
  }
  .header-navbar&gt;li&gt;a:hover {
      color: #FFF;
      text-decoration: none;
  }
  .header-navbar&gt;.header-brand&gt;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&gt;a:hover, .dropdown-menu li&gt;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;
  }
  </code></pre>