title: Putting several links in a line contained in a wrapper
body: <p>I am doing a drop down menu and i want the drop down items to all be in a line and probably drops to the next line on screen resolution. my html is</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;li class="main"&gt;&lt;a href="#"&gt; Menu &lt;/a&gt;
      &lt;ul&gt;
       &lt;li class="sub-menu"&gt;&lt;a href="#"&gt;
          &lt;div class="content" style="width:300px;"&gt;
            &lt;img src="image.jpg"&gt;&lt;p&gt;text&lt;/p&gt;  
          &lt;/div&gt;&lt;/a&gt;
        &lt;/li&gt;
  
      &lt;li class="sub-menu"&gt;&lt;a href="#"&gt;
          &lt;div class="content"&gt;
            &lt;img src="image.jpg"&gt;&lt;p&gt;text&lt;/p&gt;  
          &lt;/div&gt;&lt;/a&gt;
        &lt;/li&gt;    
  
     &lt;/ul&gt;
   &lt;/li&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.main {float:left; display:inline-block; width:auto}
  
  .sub-menu{float:left; width:300px;}
  
  .content{width:100%}
  </code></pre>
  
  <p>What I am targeting is when someone clicks the main menu "<strong><em>menu</em></strong>" it drops down to the sub menu "<strong><em>sub-menu</em></strong>" and all sub menus come in line until screen width changes and the last one automatically goes to a next line. Any help will be much appreciated people!!!</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>Michelle</strong></p>