title: Menu with submenu. Pc,tablets and cell
body: <p>It's a code of menu with a submenu and Don't work the submenu.  The menu code, work for pc and tablets but submenu don't work.  Also, I'd like the submenu work like acordion in tablet.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(main);
  
  var contador = 1;
  
  function main (){
      $('.menu_bar').click(function(){
          // $('nav').toggle(); Forma Sencilla de aparecer y desaparecer
  
          if (contador == 1){
              $('nav').animate({
                  left: '0'
              });
              contador = 0;
          } else {
              contador = 1;
              $('nav').animate({
                  left: '-100%'
              });
          };
  
      });
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS Document */
  @font-face {
      font-family: 'FalconMasters';
      src:url('../fonts/FalconMasters.eot?-ibh2ms');
      src:url('../fonts/FalconMasters.eot?#iefix-ibh2ms') format('embedded-opentype'),
          url('../fonts/FalconMasters.woff?-ibh2ms') format('woff'),
          url('../fonts/FalconMasters.ttf?-ibh2ms') format('truetype'),
          url('../fonts/FalconMasters.svg?-ibh2ms#FalconMasters') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  [class^="icon-"], [class*=" icon-"] {
      font-family: 'FalconMasters';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
  
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-mail:before {
      content: "\e604";
  }
  .icon-house:before {
      content: "\e622";
  }
  .icon-rocket:before {
      content: "\e650";
  }
  .icon-suitcase:before {
      content: "\e652";
  }
  .icon-earth:before {
      content: "\e654";
  }
  .icon-cross:before {
      content: "\e678";
  }
  .icon-list2:before {
      content: "\e696";
  }
  
  
  
  * {
   margin:0;
   padding:0;
  }
  
  body {
   background:#FFFFFA;
  }
  
  header {
   width:100%;
  }
  
  header nav {
   width:100%;
   max-width:1000px;
   background:#024959;
  }
  
  .menu_bar {
   display:none;
  }
  
  nav ul {
   overflow:hidden;
   list-style:none;
  }
  
  nav ul li {
   float:left;
   position:relative;
   display:inline-block;
  }
  
  nav ul li a {
   color:#fff;
   padding:20px;
   display:block;
   text-decoration:none;
   line-height:20px;
   position: relative;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -ms-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease;
  }
  
  nav ul li span {
   margin-right:10px;
  }
  
  nav ul li a:hover {
   background:#037E8C;
  }
  
  section {
   padding:20px;
  }
  
  /*Sub-menu*/
  nav .submenu1{
    position:relative;
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  #submenu a:hover .submenu1{
      display: block;
      background-color:#D90B0F;
  }
  
  @media screen and (max-width:800px ) {
   header nav {
    width:80%;
    height:100%;
    left:-100%;
    margin:0;
    position: fixed;
   }
  
   header nav ul li {
    display:block;
    float:none;
    border-bottom:1px solid rgba(255,255,255, .3);
   }
  
   .menu_bar {
    display:block;
    width:100%;
    background:#ccc;
   }
  
   .menu_bar .bt-menu {
    display:block;
    padding:20px;
    background:#024959;
    color:#fff;
    text-decoration:none;
    font-weight: bold;
    font-size:25px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
   }
  
   .menu_bar span {
    float:right;
    font-size:40px;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
  &lt;link rel="stylesheet" href="http://i.icomoon.io/public/temp/7d96e2500b/UntitledProject7/style.css"&gt;
  &lt;link rel="stylesheet" href="assets/css/menuH.css"&gt;
  
  &lt;title&gt;index&lt;/title&gt;
  
  &lt;meta charset="utf-8"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;header&gt;
    &lt;div class="menu_bar"&gt;
     &lt;a href="#" class="bt-menu"&gt;&lt;span class="icon-list2"&gt;&lt;/span&gt;Menu&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;nav&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="icon-house"&gt;&lt;/span&gt;Inicio&lt;/a&gt;&lt;/li&gt;
      &lt;li id="submenu"&gt;&lt;a href="#"&gt;&lt;span class="icon-suitcase"&gt;&lt;/span&gt;Trabajos&lt;/a&gt;
       &lt;ul class="submenu1"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item #1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item #2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item #3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item #4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item #5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
       
       &lt;/li&gt;
          
      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="icon-rocket"&gt;&lt;/span&gt;Proyectos&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="icon-earth"&gt;&lt;/span&gt;Servicios&lt;/a&gt;&lt;/li&gt; 
      &lt;li id="submenu"&gt;&lt;a href="#"&gt;&lt;span class="icon-mail"&gt;&lt;/span&gt;Contactos&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/nav&gt;
   &lt;/header&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>#submenu a:hover .submenu1{
      display: block;
      background-color:#D90B0F;
  } 
  </code></pre>
  
  <p>why?</p>
  
  <p>--------------- css 3 -------------</p>
  
  <pre><code>/* CSS Document */
  @font-face {
      font-family: 'FalconMasters';
      src:url('../fonts/FalconMasters.eot?-ibh2ms');
      src:url('../fonts/FalconMasters.eot?#iefix-ibh2ms') format('embedded-opentype'),
          url('../fonts/FalconMasters.woff?-ibh2ms') format('woff'),
          url('../fonts/FalconMasters.ttf?-ibh2ms') format('truetype'),
          url('../fonts/FalconMasters.svg?-ibh2ms#FalconMasters') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  [class^="icon-"], [class*=" icon-"] {
      font-family: 'FalconMasters';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
  
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-mail:before {
      content: "\e604";
  }
  .icon-house:before {
      content: "\e622";
  }
  .icon-rocket:before {
      content: "\e650";
  }
  .icon-suitcase:before {
      content: "\e652";
  }
  .icon-earth:before {
      content: "\e654";
  }
  .icon-cross:before {
      content: "\e678";
  }
  .icon-list2:before {
      content: "\e696";
  }
  
  
  
  * {
   margin:0;
   padding:0;
  }
  
  body {
   background:#FFFFFA;
  }
  
  header {
   width:100%;
  }
  
  header nav {
   width:100%;
   max-width:1000px;
   background:#024959;
  }
  
  .menu_bar {
   display:none;
  }
  
  nav ul {
   overflow:hidden;
   list-style:none;
  }
  
  nav ul li {
   float:left;
   position:relative;
   display:inline-block;
  }
  
  nav ul li a {
   color:#fff;
   padding:20px;
   display:block;
   text-decoration:none;
   line-height:20px;
   position: relative;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -ms-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease;
  }
  
  nav ul li span {
   margin-right:10px;
  }
  
  nav ul li a:hover {
   background:#037E8C;
  }
  
  section {
   padding:20px;
  }
  
  /*Sub-menu*/
  nav .submenu1{
    position:relative;
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  #submenu a:hover .submenu1{
      display: block;
      background-color:#D90B0F;
  }
  
  @media screen and (max-width:800px ) {
   header nav {
    width:80%;
    height:100%;
    left:-100%;
    margin:0;
    position: fixed;
   }
  
   header nav ul li {
    display:block;
    float:none;
    border-bottom:1px solid rgba(255,255,255, .3);
   }
  
   .menu_bar {
    display:block;
    width:100%;
    background:#ccc;
   }
  
   .menu_bar .bt-menu {
    display:block;
    padding:20px;
    background:#024959;
    color:#fff;
    text-decoration:none;
    font-weight: bold;
    font-size:25px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
   }
  
   .menu_bar span {
    float:right;
    font-size:40px;
   }
  }
  </code></pre>
  
  <p>-------------------- html5 ------------------</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
  &lt;link rel="stylesheet" href="http://i.icomoon.io/public/temp/7d96e2500b/UntitledProject7/style.css"&gt;
  &lt;link rel="stylesheet" href="assets/css/menuH.css"&gt;
  
  &lt;title&gt;index&lt;/title&gt;
  
  &lt;meta charset="utf-8"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;header&gt;
    &lt;div class="menu_bar"&gt;
     &lt;a href="#" class="bt-menu"&gt;&lt;span class="icon-list2"&gt;&lt;/span&gt;Menu&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;nav&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="icon-house"&gt;&lt;/span&gt;Inicio&lt;/a&gt;&lt;/li&gt;
      &lt;li id="submenu"&gt;&lt;a href="#"&gt;&lt;span class="icon-suitcase"&gt;&lt;/span&gt;Trabajos&lt;/a&gt;&lt;/li&gt;
          &lt;ul class="submenu1"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item #1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item #2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item #3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item #4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item #5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="icon-rocket"&gt;&lt;/span&gt;Proyectos&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="icon-earth"&gt;&lt;/span&gt;Servicios&lt;/a&gt;&lt;/li&gt;
      &lt;li id="submenu"&gt;&lt;a href="#"&gt;&lt;span class="icon-mail"&gt;&lt;/span&gt;Contactos&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/nav&gt;
   &lt;/header&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(main);
  
  var contador = 1;
  
  function main (){
      $('.menu_bar').click(function(){
          // $('nav').toggle(); Forma Sencilla de aparecer y desaparecer
  
          if (contador == 1){
              $('nav').animate({
                  left: '0'
              });
              contador = 0;
          } else {
              contador = 1;
              $('nav').animate({
                  left: '-100%'
              });
          };
  
      });
  };
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks.</p>