title: Displaced elements of navigation menu
body: <p>I try to create a horizontal navigation, but there are some problems:</p>
  
  <ol>
  <li>The first element is displaced</li>
  <li>Is there a better way to place the Text centered below the icon. Now I did that just with a <br>. And how should I use the optional arrow-down-icon - here I used the span-tag. I think the html-markup for that is not the best. </li>
  <li>And the second-level ul (=subelements) isn't shown correctly and doesn't enclose the subelements.</li>
  </ol>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/pqubgt2d/" rel="nofollow">http://jsfiddle.net/pqubgt2d/</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>   nav {
      background-color: #f2f2f2;
      padding: .3em 0;
      border-radius: 7px;
     }
     nav ul {
      list-style: none;
      height: 2.5em;
      padding: .25em;
      color: #555;
      margin: 0;
     }
     nav ul li {
      font-family: "Source Sans Pro";
      font-size: .5em;
      margin: .5em 0;
      display: inline-block;
      width: 4em;
      text-align: center;
     }
     nav ul li i {
         font-size: 3em !important;
     }
     nav ul li ul {
      font-size: 3em;
      background-color: #f2f2f2;
     }
  
     .button-arrow-down {
      width: 0; 
      height: 0; 
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #B4B4B4;
         margin: 0 auto;
         position: relative;
         bottom: -7px;
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
    &lt;nav&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;i class="fa fa-file-o"&gt;&lt;/i&gt;&lt;br&gt;New&lt;/li&gt;
      &lt;li&gt;
       &lt;i class="fa fa-floppy-o"&gt;&lt;/i&gt;&lt;br&gt;
       Save&lt;br&gt;
       &lt;span class="button-arrow-down"&gt;&lt;/span&gt;
       &lt;ul&gt;
        &lt;li&gt;Subelement 1&lt;/li&gt;
        &lt;li&gt;Subelement 2&lt;/li&gt;
        &lt;li&gt;Subelement 3&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;
     &lt;/ul&gt;
    &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>