title: Why is HTML span stacking vertically?
body: <p>On my website I have two SPANS : "services" and "products" in the top right corner (in the gray strip). For some reason they are being stacked vertically, where I would expect them to align horizontally, since SPANS are just a markup that marksup text inside a text block.</p>
  
  <p>Snippet :</p>
  
  <pre><code>&lt;div id="access"&gt;
    &lt;div&gt;
      &lt;a href="#"&gt;
        &lt;span&gt;services &lt;/span&gt;
      &lt;/a&gt;
      &lt;a href="#"&gt;
        &lt;span&gt;products&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This CSS is the problem i think </p>
  
  <pre><code>#access {
      /* background: #74C20E;
      background: #716417;*/
      display: block;
      float: left;
      margin: 5px auto;
      background-color:rgb(181, 197, 207);
      -moz-border-radius: 0px;
      border-radius: 0px;
  
      width: 1200px;
  
  &lt;!-- width: 940px;
  --&gt;
  }
  
  #access .menu-header,
  div.menu {
  
      font-size: 13px;
      margin-left: 12px;
      width: 928px;
  }
  #access .menu-header ul,
  div.menu ul {
      list-style: none;
      margin: 0;
  }
  #access .menu-header li,
  div.menu li {
      float: left;
      position: relative;
  }
  #access a {
      color: white;
      display: block;
      line-height: 38px;
      padding: 0 10px;
      text-decoration: none;
  }
  #access ul ul {
      box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
      display: none;
      position: absolute;
      top: 38px;
      left: 0;
      float: left;
      width: 180px;
      z-index: 99999;
  }
  #access ul ul li {
      min-width: 180px;
  }
  #access ul ul ul {
      left: 100%;
      top: 0;
  }
  #access ul ul a {
      background: #0f9195;
      line-height: 1em;
      padding: 10px;
      width: 160px;
      height: auto;
  }
  #access li:hover &gt; a,
  #access ul ul :hover &gt; a {
      background: #635ba9;
      color: #fff;
  }
  #access ul li:hover &gt; ul {
      display: block;
  }
  #access ul li.current_page_item &gt; a,
  #access ul li.current-menu-ancestor &gt; a,
  #access ul li.current-menu-item &gt; a,
  #access ul li.current-menu-parent &gt; a {
      color: #fff;
  }
  </code></pre>
  
  <p>Fiddle is here</p>
  
  <p><a href="http://jsfiddle.net/9uK9L/" rel="nofollow">http://jsfiddle.net/9uK9L/</a></p>
  
  <p>Does anyone know why they are being displayed vertically rather than horizontally?</p>