title: How to keep Menu on One Line?
body: <p>I have a menu like this: <a href="http://codepen.io/anon/pen/pjBdEL" rel="nofollow">http://codepen.io/anon/pen/pjBdEL</a>
  I would like that the menu at the end of the first line would show a button with a drop down menu instead of going on two lines.
  When clicking on the button it should show a drop down menu contaning the "second line" menu items.</p>
  
  <p>Here there's an example (Italian Wired Menu): <a href="http://www.wired.it/" rel="nofollow">http://www.wired.it/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu {width:100%;}
  .menu ul {
    padding:0;
    float:left;
    width:100%;
    list-style:none;
  }
  .menu ul li {
    margin:0;
    padding:10px 20px;
    position:relative;
    display: inline-block;
    text-transform:uppercase;
    font-size:1.3em;
    font-weight:bold;
    font-family:'Arial', sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
      &lt;li&gt;Four&lt;/li&gt;
      &lt;li&gt;Five&lt;/li&gt;
      &lt;li&gt;Six&lt;/li&gt;
      &lt;li&gt;Seven&lt;/li&gt;
      &lt;li&gt;Eight&lt;/li&gt;
      &lt;li&gt;Nine&lt;/li&gt;
      &lt;li&gt;Ten&lt;/li&gt;
      &lt;li&gt;Eleven&lt;/li&gt;
      &lt;li&gt;Twelve&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks :)</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The Button is <strong>not</strong> for the responsive menu.  I need a button at <strong>the end</strong> of my menu to show items that does not fit into the first line of the menu.</p>