title: use CSS to change a horizontal menu to be a responsive menu for mobile devices
body: <p>I have this HTML for me horizontal CSS menu:</p>
  
  <pre><code>&lt;div id="cssmenu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Homepage&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Services&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;LINK&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Projects&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Contact Us&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Whats the best way to use css to make it a dropdown menu (like: <a href="http://responsive-nav.com/" rel="nofollow">http://responsive-nav.com/</a>) when the page gets smaller.</p>
  
  <p>i have made this menu dissapear when the page gets too small using media queries but i would like to just use CSS to change it to be like the menu (link above) and keep the same HTML.</p>
  
  <p>here is a fiddle with the full code: <em><a href="http://jsfiddle.net/auBpX/" rel="nofollow">http://jsfiddle.net/auBpX/</a></em></p>