title: display ul li side by side
body: <p>I'm trying to display a drop down part of a menu side by side instead of top to bottom. I have to display: none to make the menu work, and float: left isn't doing it. I'm out of ideas and not sure what else to do needing the display: none to be there to hide the list until it needs to show. I've thrown float: left pretty much everywhere.
  The CSS:</p>
  
  <pre><code>ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      min-width: 200px;
      float: left;
      display: inline;
  } 
  ul#navigation {
      float: left;
  } 
  ul#navigation li {
      float: left;
      border: 1px black solid;
      min-width: 200px;
  } 
  ul.sub_navigation {
      position:absolute;
      float: left;
      display: inline;
      display: none;
  } 
  ul.sub_navigation li {
      clear: both;
      float: left;
      display: inline;
  } 
  a,a:active,a:visited {
      display: block;
      padding: 10px;
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;ul id="navigation"&gt;
          &lt;li class="dropdown"&gt;&lt;a href="javascript:ajaxpage('home.php', 'body');"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a href="javascript:ajaxpage('projects.php', 'body');"&gt;Projects&lt;/a&gt;
              &lt;ul class="sub_navigation" style="float: left;"&gt;
                      &lt;!-- pull projects with P H P --&gt;
                      &lt;li&gt;&lt;a href="javascript:ajaxpage('openproj.php?id=&lt;? echo $row['id']; ?&gt;', 'body');"&gt;&lt;? echo $row['name']; ?&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="javascript:ajaxpage('createproj.php', 'body');"&gt;Add a project&lt;/a&gt;&lt;/li&gt;
                      &lt;?php
                      }
                      ?&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a href="javascript:ajaxpage('pubfiles.php', 'body');"&gt;Public Files&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a href="javascript:ajaxpage('users.php', 'body');"&gt;Users&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a href="javascript:ajaxpage('settings.php', 'body');"&gt;Settings&lt;/a&gt;&lt;/li&gt;
              &lt;!-- only pull if admin and logged in per P H P session--&gt;
          &lt;li class="dropdown"&gt;&lt;a href="javascript:ajaxpage('admin.php', 'body');"&gt;Admin&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>