title: Responsive design, display static list in a dropdown list in mobile view
body: <p>I have a static list of items like this:</p>
  
  <pre><code>&lt;div id="accordian"&gt;
      &lt;ul&gt;
          &lt;li class="active"&gt;
              &lt;p class="accordiontitle_two"&gt;&lt;a href="/"&gt;Women Clothing&lt;/a&gt;&lt;/p&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/women-coats/"&gt;Coats&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/women-dresses/"&gt;Dresses&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/women-jackets/"&gt;Jackets&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/women-jeans/"&gt;Jeans&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to display this in a dropdown list if screen width drops beneath a certain width, e.g on mobile browsers. I'm currently using the @media screen property in CSS but I'm assuming something like this needs jquery?</p>
  
  <p>My question is, how would I achieve something like this?</p>
  
  <p>Thank You</p>