title: horizontal menu items not displaying inline
body: <p>im trying to create a Horizontal menu:</p>
  
  <p>CSS</p>
  
  <pre><code> #menu {
          display:inline;
          float:right;
      }
      #menu &gt; li {
          display:inline;
          list-style:none;
          width:40px;
          border-top:4px solid #FFFFFF;
          padding-top:20px;
          margin-top:25px;
      }
  </code></pre>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div id="menu"&gt;
  &lt;li&gt;HOME&lt;/li&gt;
  &lt;li&gt;HOME&lt;/li&gt;
  &lt;li&gt;HOME&lt;/li&gt;
  &lt;li&gt;HOME&lt;/li&gt;
  &lt;li&gt;HOME&lt;/li&gt;
  &lt;li&gt;HOME&lt;/li&gt;
  &lt;li&gt;HOME&lt;/li&gt;
  &lt;/div&gt;&lt;!-- menu --&gt;
  </code></pre>
  
  <p>i have added <code>display:inline;</code> but they are not displaying correctly with the <code>top-border</code> when i remove the <code>display:inline;</code> it works fine but they all display in a vertical list</p>