title: Css style for <ul> with dropdown
body: <p>i have a page that displays a menu and im trying to make and learn to code a responsive layout using @media screen coding.</p>
  
  <p>so i coded the following page;</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  
  &lt;title&gt;Header Test&lt;/title&gt;
  
  &lt;meta name="viewport" content="width=1024"&gt;
  
  &lt;link type="text/css" rel="stylesheet" href="stylesheet.css" /&gt;
  &lt;link type="text/css" rel="stylesheet" href="font.css" /&gt;
  &lt;script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt; 
  $(function(){
    $(window).resize(function(){
      if (window.innerWidth &gt; 850) {
        $("#nav").removeClass('vertical');
      }
    });
  
    $("#menu").click(function(){
      $("#nav").toggleClass('vertical');
      return false;
    });
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="header"&gt;
    &lt;div class="wrap"&gt;
      &lt;div id="logo"&gt;
        &lt;img src="http://www.real-creative.co.uk/new/img/logo-white.png"&gt;
      &lt;/div&gt;
  
      &lt;span id="menu"&gt;&lt;img src="img/menu-icon.png" width="40" height="40" /&gt;&lt;/span&gt;
  
      &lt;div id="navWrap"&gt;
        &lt;ul id="nav"&gt;
          &lt;li&gt;&lt;h1&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt;
          &lt;li&gt;&lt;h1&gt;&lt;a href="#"&gt;WORK&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt;
          &lt;li&gt;&lt;h1&gt;&lt;a href="#"&gt;SERVICES&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt;
          &lt;li&gt;&lt;h1&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt;
          &lt;li&gt;&lt;h1&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;!--header--&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>what I am trying to achieve is once the page is below 800 pixels wide the button to drop down the navigation appears, I made an image in Photoshop to show what the desired look I wanted, but im unsure on how to style  lists to the way i show in the image.</p>
  
  <p>can anyone please help me out.</p>
  
  <p>URL for current site is:
  <a href="http://www.real-creative.co.uk/new/" rel="nofollow">http://www.real-creative.co.uk/new/</a></p>
  
  <p>and here is the image;
  <a href="http://www.real-creative.co.uk/new/viewport.png" rel="nofollow">http://www.real-creative.co.uk/new/viewport.png</a></p>
  
  <p>appreciate if anyone can help me out.</p>