title: how to add sub menus on a responsive css menu
body: <p>I have this html for my css menu:</p>
  
  <pre><code>&lt;nav class="clearfix"&gt;
      &lt;ul class="clearix"&gt;
          &lt;li&gt;&lt;a href="http://www.domain.co.uk/"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/services"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/project-gallery"&gt;Project Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/contact-us"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;  
      &lt;/ul&gt;
      &lt;a href="#" id="pull"&gt;Menu&lt;/a&gt;  
  &lt;/nav&gt;
  </code></pre>
  
  <p>&nbsp;</p>
  
  <pre><code>nav {
      height: 50px;  
      width: 100%;  
      background: #F00;  
      font-size: 14pt;  
      font-family: Arial;
      position: relative;  
      border-bottom: 5px solid #FFFFFF;  
  }  
  nav ul {  
      padding: 0;  
      margin: 0 auto;  
      width: 100%;  
      height: 50px;
      text-align: center;
  }
  nav li {  
      display: inline;
  }  
  .clearfix:before,  
  .clearfix:after {  
      content: " ";  
      display: table;  
  }  
  .clearfix:after {  
      clear: both;  
  }  
  .clearfix {  
      *zoom: 1;  
  }  
  nav a {  
      color: #FFFFFF;  
      display: inline-block;  
      width: auto;
  
      text-align: center;  
      text-decoration: none;  
      line-height: 50px;  
  }  
  nav li a {
      box-sizing:border-box;  
      -moz-box-sizing:border-box;  
      -webkit-box-sizing:border-box;
      padding-left: 10px;
      padding-right: 10px;
  }  
  nav li:last-child a {  
      border-right: 0;  
  }  
  nav a:hover, nav a:active {  
      background-color: #000000;
      color:#FFFFFF;  
  } 
  nav a#pull {  
      display: none;  
  }  
  @media screen and (max-width: 600px) {  
      nav {   
          height: auto;  
      }  
      nav ul {  
          width: 100%;  
          display: block;  
          height: auto;  
      }  
      nav li {  
          width: 50%;  
          float: left;  
          position: relative;  
      }  
      nav li a {  
          border-bottom: 1px solid #FFFFFF;  
          border-right: 1px solid #FFFFFF;  
      }  
      nav a {  
          text-align: left;  
          width: 100%;  
          text-indent: 25px;  
      }  
  }  
  @media only screen and (max-width : 480px) {  
      nav {  
          border-bottom: 0;  
      }  
      nav ul {  
          display: none;  
          height: auto;  
      }  
      nav a#pull {  
          display: block;
          color:#FFFFFF;
          background-color: #F00;  
          width: 100%;  
          position: relative;  
      }  
      nav a#pull:after {  
          content:"";  
          background: url('nav-icon.png') no-repeat;  
          width: 30px;  
          height: 30px;  
          display: inline-block;  
          position: absolute;  
          rightright: 15px;  
          top: 10px;  
      }  
  }  
  @media only screen and (max-width : 320px) {  
      nav li {  
          display: block;  
          float: none;  
          width: 100%;  
      }  
      nav li a {  
          border-bottom: 1px solid #FFFFFF;  
      }  
  }  
  </code></pre>
  
  <p>I am looking for a way to add sub menus and then second sub menus on on the first ones but still keep it as responsive as it is.</p>
  
  <p>How can I do this?</p>
  
  <p><a href="http://jsfiddle.net/EYjnG/" rel="nofollow">http://jsfiddle.net/EYjnG/</a></p>