title: How do I make my sub-links/text horizontal when being diplayed?
body: <p>I have a nav bar with a drop down that is working beautifully. The only thing I am trying to change, is when you hover over the main links, the sub-links/text are on top of eachother. I want them to display horizontally. I have tried all sorts of floats and display inline etc...</p>
  
  <p>Here is a portion of the HTML:</p>
  
  <pre><code>&lt;ul id="top_main_nav" style="float:left;"&gt;
                      &lt;li&gt;&lt;a href="Profile.php?id=&lt;?php echo $auth-&gt;id; ?&gt;"&gt;Me&lt;/a&gt;
                          &lt;ul&gt;
                          &lt;li&gt;&lt;a href="Profile.php?id=&lt;?php echo $auth-&gt;id; ?&gt;"&gt;&lt;?php echo ($auth-&gt;first_name); ?&gt; &lt;?php if(strlen($auth-&gt;last_name) &gt; 6) { echo substr(strtoupper($auth-&gt;last_name),0,6) . "..."; }else{ echo ($auth-&gt;last_name); } ?&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="EditProfile.php"&gt;Edit My Profile&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="MySettings.php"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="EmailSettings.php"&gt;Email Settings&lt;/a&gt;&lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is the css:</p>
  
  <pre><code>#user_nav_future { 
      margin: 0 auto; 
      font: bold 12px Arial,Helvetica, sans-serif; 
      color: #fff; 
  }
  
  #user_nav_future ul li { 
      list-style: none; 
      float: left;
  }
  
  #user_nav_future ul li a {
      color: #fff; 
      padding: 10px; 
      display: block; 
      text-decoration: none;
  }
  
  #user_nav_future li ul {
      display: none;
      position: absolute; 
      top: 35px; 
      right: 160px; 
      z-index: 1001; 
      margin: 0; 
      padding: 0;
  }
  
  #user_nav_future li ul a { 
      color: #666; 
      display: inline; 
      float: left;
  }
  
  #user_nav_future ul li a:hover { 
      color: #FF4800;
  }
  
  #user_nav_future ul { 
      padding:0; 
      margin:0; 
      list-style:none;
  }
  
  #user_nav_future li { 
      float:left; 
      position:relative; 
      text-align:center;
  }
  
  #user_nav_future li ul { 
      display:none; 
      position:absolute; 
      top:34px; 
      left:0;
  }
  
  #user_nav_future li ul li { 
      width:160px;
  }
  
  #user_nav_future li:hover ul,#user_nav li.over ul { 
      display:block;
  }
  </code></pre>