title: Why are these list elements not appearing in a line?
body: <p>I'm trying to make the navbar elements appear in a row, side by side, with the dropdown one causing a menu to drop down beneath them.</p>
  
  <p>I know there's the <code>nav</code> element and I know there are a thousand jQuery plugins for this. I just want to understand why <em>this</em> isn't working.</p>
  
  <p><a href="http://codepen.io/anon/pen/hjKLD" rel="nofollow">http://codepen.io/anon/pen/hjKLD</a></p>
  
  <pre><code>&lt;!-- Works all the way down to IE7! --&gt;
  
  &lt;header&gt;
  &lt;nav&gt;
      &lt;a href="#"&gt;link&lt;/a&gt;
      &lt;a href="#"&gt;link&lt;/a&gt;
      &lt;ul class="drop"&gt;
         &lt;li&gt;
             &lt;a href="#"&gt;dropdown&lt;/a&gt;
         &lt;/li&gt;
         &lt;li class="menu"&gt;
             &lt;a href="#"&gt;link&lt;/a&gt;
             &lt;a href="#"&gt;link&lt;/a&gt;
             &lt;a href="#"&gt;link&lt;/a&gt;
             &lt;a href="#"&gt;link&lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
      &lt;a href="#"&gt;link&lt;/a&gt;
      &lt;a href="#"&gt;link&lt;/a&gt;    
  &lt;/nav&gt;
  &lt;/header&gt;
  
  li {
   list-style-type:none;
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
  </code></pre>