title: Why when the menu is fully expanded and i scroll down on mobile devices the menu collapses
body: <p>I was wondering why when the menu is fully expanded and when on mobile devices you scroll down the menu actually collapses. Please help.
  Link to the site,, be aware i have not done much yet. <a href="http://explorenewzealand.net" rel="nofollow">explorenewzealand.net</a>
  I will put the code down below if required. Just ask and i will comment with the code that you want.
  Thank you very much and any help would be appreciated</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
          &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=us-ascii"&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; 
      &lt;title&gt;Home|Tourist Advice|Explore New Zealand&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles.css" media="screen" /&gt;
  &lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;
  
  
      &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id='cssmenu'&gt;
  &lt;ul&gt;
      &lt;li class="active"&gt;&lt;a href=""&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="has-sub"&gt;&lt;a href="aboutnewzealand.html"&gt;&lt;span&gt;About New Zealand&lt;/span&gt;&lt;/a&gt;
      &lt;ul&gt;
          &lt;li class="has-sub"&gt;&lt;a href="#"&gt;&lt;span&gt;South Island&lt;/span&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="aboutnewzealand/marlborough.html"&gt;&lt;span&gt;Marlborough&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="aboutnewzealand/nelson.html"&gt;&lt;span&gt;Nelson&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="aboutnewzealand/westcoast.html"&gt;&lt;span&gt;West Coast&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="aboutnewzealand/canterbury.html"&gt;&lt;span&gt;Canterbury&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="aboutnewzealand/queenstown-lakes.html"&gt;&lt;span&gt;Queenstown Lakes&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="aboutnewzealand/fiordland.html"&gt;&lt;span&gt;Fiordland&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="aboutnewzealand/otago.html"&gt;&lt;span&gt;Otago&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="last"&gt;&lt;a href="aboutnewzealand/southland.html"&gt;&lt;span&gt;Southland&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="has-sub"&gt;&lt;a href="accommodation.html"&gt;&lt;span&gt;Accommodation&lt;/span&gt;&lt;/a&gt;
      &lt;ul&gt;
          &lt;li class="has-sub"&gt;&lt;a href="#"&gt;&lt;span&gt;South Island &lt;/span&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="accommodation/marlborough.html"&gt;&lt;span&gt;Marlborough&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="accommodation/nelson.html"&gt;&lt;span&gt;Nelson&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="accommodation/westcoast.html"&gt;&lt;span&gt;West Coast&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="accommodation/canterbury.html"&gt;&lt;span&gt;Canterbury&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="accommodation/queenstown-lakes.html"&gt;&lt;span&gt;Queenstown Lakes&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="accommodation/fiordland.html"&gt;&lt;span&gt;Fiordland&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="accommodation/otago.html"&gt;&lt;span&gt;Otago&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="last"&gt;&lt;a href="accommodation/southland.html"&gt;&lt;span&gt;Southland&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="has-sub"&gt;&lt;a href="attractions.html"&gt;&lt;span&gt;Attractions &amp;amp; Activities&lt;/span&gt;&lt;/a&gt;
      &lt;ul&gt;
          &lt;li class="has-sub"&gt;&lt;a href="#"&gt;&lt;span&gt;South Island &lt;/span&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="attractions&amp;amp;activities/marlborough.html"&gt;&lt;span&gt;Marlborough&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="attractions&amp;amp;activities/nelson.html"&gt;&lt;span&gt;Nelson&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="attractions&amp;amp;activities/westcoast.html"&gt;&lt;span&gt;West Coast&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="attractions&amp;amp;activities/canterbury.html"&gt;&lt;span&gt;Canterbury&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="attractions&amp;amp;activities/queenstown-lakes.html"&gt;&lt;span&gt;Queenstown Lakes&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="attractions&amp;amp;activities/fiordland.html"&gt;&lt;span&gt;Fiordland&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="attractions&amp;amp;activities/otago.html"&gt;&lt;span&gt;Otago&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="last"&gt;&lt;a href="attractions&amp;amp;activities/southland.html"&gt;&lt;span&gt;Southland&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="has-sub last"&gt;&lt;a href="dining.html"&gt;&lt;span&gt;Dining&lt;/span&gt;&lt;/a&gt;
      &lt;ul&gt;
          &lt;li class="has-sub"&gt;&lt;a href="#"&gt;&lt;span&gt;South Island &lt;/span&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="dining/marlborough.html"&gt;&lt;span&gt;Marlborough&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="dining/nelson.html"&gt;&lt;span&gt;Nelson&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="dining/westcoast.html"&gt;&lt;span&gt;West Coast&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="dining/canterbury.html"&gt;&lt;span&gt;Canterbury&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="dining/queenstown-lakes.html"&gt;&lt;span&gt;Queenstown Lakes&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="fiordland.html"&gt;&lt;span&gt;Fiordland&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="otago.html"&gt;&lt;span&gt;Otago&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="last"&gt;&lt;a href="southland.html"&gt;&lt;span&gt;Southland &lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
  #cssmenu,
  #cssmenu ul,
  #cssmenu ul li,
  #cssmenu ul li a,
  #cssmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #cssmenu:after,
  #cssmenu &gt; ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  #cssmenu #menu-button {
    display: none;
  }
  #cssmenu {
    width: auto;
    border-radius: 5px;
    font-family: 'Open Sans', Helvetica, sans-serif;
    background: #3db2e1;
    background: -o-linear-gradient(top, #69c4e8, #21a1d4);
    background: -ms-linear-gradient(top, #69c4e8, #21a1d4);
    background: -webkit-linear-gradient(top, #69c4e8, #21a1d4);
    background: -moz-linear-gradient(top, #69c4e8, #21a1d4);
    background: linear-gradient(to bottom, #69c4e8, #21a1d4);
    box-shadow: inset 0 -3px 0 #1f97c7, inset 0 -3px 3px #1f9acc, inset 0 2px 2px #9ad7ef, inset 1px 0 2px #22a4d9, inset -1px 0 2px #22a4d9, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
  }
  #cssmenu.align-center &gt; ul {
    font-size: 0;
    text-align: center;
  }
  #cssmenu.align-center ul ul {
    text-align: left;
  }
  #cssmenu.align-center &gt; ul &gt; li {
    display: inline-block;
    float: none;
  }
  #cssmenu.align-right &gt; ul &gt; li {
    float: right;
  }
  #cssmenu.align-right ul ul {
    text-align: right;
  }
  #cssmenu &gt; ul &gt; li {
    float: left;
  }
  #cssmenu &gt; ul &gt; li &gt; a {
    padding: 20px 25px;
    font-size: 13px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    font-weight: 700;
    text-decoration: none;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
  }
  #cssmenu &gt; ul &gt; li:hover &gt; a,
  #cssmenu &gt; ul &gt; li &gt; a:hover,
  #cssmenu &gt; ul &gt; li.active &gt; a {
    color: #cae5fd;
  }
  #cssmenu &gt; ul &gt; li.has-sub &gt; a {
    padding-right: 40px;
  }
  #cssmenu ul &gt; li.has-sub &gt; a:after {
    content: '';
    position: absolute;
    right: 5px;
    top: 17.5px;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #3db2e1;
    background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
    background-size: 36px 36px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
  }
  #cssmenu ul &gt; li.has-sub:hover &gt; a:after {
    background-position: 0 -18px;
  }
  #cssmenu ul &gt; li.has-sub &gt; a:before {
    content: '';
    position: absolute;
    right: 11px;
    top: 25.5px;
    display: block;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-top-color: #ffffff;
    z-index: 99;
  }
  #cssmenu ul &gt; li.has-sub:hover &gt; a:before {
    border-top-color: #19799f;
  }
  #cssmenu ul ul {
    position: absolute;
    left: -9999px;
    opacity: 0;
    -webkit-transition: top .2s ease, opacity .2s ease;
    -moz-transition: top .2s ease, opacity .2s ease;
    -ms-transition: top .2s ease, opacity .2s ease;
    -o-transition: top .2s ease, opacity .2s ease;
    transition: top .2s ease, opacity .2s ease;
  }
  #cssmenu &gt; ul &gt; li &gt; ul {
    top: 91px;
    padding-top: 8px;
    border-radius: 5px;
  }
  #cssmenu &gt; ul &gt; li:hover &gt; ul {
    left: auto;
    top: 51px;
    opacity: 1;
  }
  #cssmenu.align-right &gt; ul &gt; li:hover &gt; ul {
    right: 0;
  }
  #cssmenu ul ul ul {
    top: 40px;
  }
  #cssmenu ul ul &gt; li:hover &gt; ul {
    top: 0;
    left: 178px;
    padding-left: 10px;
    opacity: 1;
  }
  #cssmenu.align-right ul ul &gt; li:hover &gt; ul {
    left: auto;
    right: 178px;
    padding-left: 0;
    padding-right: 10px;
    opacity: 1;
  }
  #cssmenu ul ul li a {
    width: 180px;
    padding: 12px 25px;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    color: #ffffff;
    text-decoration: none;
    background: #3db2e1;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
  }
  #cssmenu ul ul li:hover &gt; a,
  #cssmenu ul ul li &gt; a:hover,
  #cssmenu ul ul li.active &gt; a {
    color: #cae5fd;
  }
  #cssmenu ul ul li:first-child &gt; a {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: inset 0 2px 2px #88d0ed;
  }
  #cssmenu ul ul li:last-child &gt; a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: inset 0 -3px 0 #27a9de, inset 0 -3px 3px #1f9acc, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
  }
  #cssmenu ul ul &gt; li.has-sub &gt; a:after {
    right: 12px;
    top: 9.5px;
    background: #3db2e1;
    background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
    background-size: 36px 36px;
    background-position: 0 0;
    background-repeat: no-repeat;
  }
  #cssmenu.align-right ul ul &gt; li.has-sub &gt; a:after {
    right: auto;
    left: 12px;
  }
  #cssmenu ul ul &gt; li.has-sub:hover &gt; a:after {
    background-position: 0 -18px;
  }
  #cssmenu ul ul &gt; li.has-sub &gt; a:before {
    top: 15.5px;
    right: 16px;
    border-top-color: transparent;
    border-left-color: #ffffff;
  }
  #cssmenu.align-right ul ul &gt; li.has-sub &gt; a:before {
    top: 15.5px;
    right: auto;
    left: 16px;
    border-top-color: transparent;
    border-right-color: #ffffff;
    border-left-color: transparent;
  }
  #cssmenu ul ul &gt; li.has-sub:hover &gt; a:before {
    border-top-color: transparent;
    border-left-color: #1c89b5;
  }
  #cssmenu.align-right ul ul &gt; li.has-sub:hover &gt; a:before {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: #1c89b5;
  }
  @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    #cssmenu {
      width: 100%;
    }
    #cssmenu ul,
    #cssmenu ul ul,
    #cssmenu ul ul ul,
    #cssmenu &gt; ul,
    #cssmenu.align-center &gt; ul,
    #cssmenu &gt; ul &gt; li &gt; ul,
    #cssmenu &gt; ul &gt; li:hover &gt; ul,
    #cssmenu ul ul li:hover &gt; ul,
    #cssmenu ul ul ul li:hover &gt; ul,
    #cssmenu.align-right ul ul,
    #cssmenu.align-right ul ul li:hover &gt; ul,
    #cssmenu.align-right ul ul ul li:hover &gt; ul {
      position: relative;
      left: 0;
      right: auto;
      top: 0;
      width: 100%;
      display: none;
      padding: 0;
      opacity: 1;
      text-align: left;
    }
    #cssmenu ul li {
      width: 100%;
      border-top: 1px solid rgba(120, 120, 120, 0.2);
    }
    #cssmenu &gt; ul &gt; li &gt; a,
    #cssmenu ul ul li a,
    #cssmenu ul ul li:first-child &gt; a,
    #cssmenu ul ul li:last-child &gt; a {
      width: 100%;
      border-radius: 0;
      box-shadow: none;
      background: none;
    }
    #cssmenu ul li a {
      padding-left: 12.5px;
    }
    #cssmenu ul ul li a {
      padding: 14px 25px 14px 27.5px;
    }
    #cssmenu ul ul ul li a {
      padding-left: 42.5px;
    }
    #cssmenu ul ul ul ul li a {
      padding-left: 57.5px;
    }
    #cssmenu &gt; ul &gt; li.has-sub &gt; a:after,
    #cssmenu &gt; ul &gt; li.has-sub &gt; a:before,
    #cssmenu ul ul li.has-sub &gt; a:after,
    #cssmenu ul ul li.has-sub &gt; a:before {
      display: none;
    }
    #cssmenu #menu-button {
      position: relative;
      display: block;
      padding: 20px;
      padding-left: 12.5px;
      cursor: pointer;
      font-size: 13px;
      color: #ffffff;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    #cssmenu .submenu-button {
      position: absolute;
      right: 0;
      display: block;
      width: 53px;
      height: 53px;
      border-left: 1px solid rgba(120, 120, 120, 0.2);
      z-index: 10;
      cursor: pointer;
    }
    #cssmenu ul ul .submenu-button {
      height: 41px;
    }
    #cssmenu ul .submenu-button:after,
    #cssmenu #menu-button:after {
      content: '';
      position: absolute;
      right: 12.5px;
      top: 12.5px;
      display: block;
      width: 28px;
      height: 28px;
      border-radius: 15px;
      background: #3db2e1;
      background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
      background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
      background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
      background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
      background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
      box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
      background-size: 56px 56px;
      background-position: 0 0;
      background-repeat: no-repeat;
      -webkit-transition: all 0.1s ease-out;
      -moz-transition: all 0.1s ease-out;
      -ms-transition: all 0.1s ease-out;
      -o-transition: all 0.1s ease-out;
      transition: all 0.1s ease-out;
    }
    #cssmenu ul .submenu-button.submenu-opened:after,
    #cssmenu #menu-button.menu-opened:after {
      background-position: 0 -28px;
    }
    #cssmenu ul ul .submenu-button:after {
      top: 6.5px;
    }
    #cssmenu #menu-button:before,
    #cssmenu .submenu-button:before {
      content: '';
      position: absolute;
      right: 22.5px;
      top: 25.5px;
      display: block;
      width: 0;
      height: 0;
      border: 4px solid transparent;
      border-top-color: #ffffff;
      z-index: 99;
    }
    #cssmenu ul ul .submenu-button:before {
      top: 19.5px;
    }
    #cssmenu #menu-button.menu-opened:before,
    #cssmenu .submenu-button.submenu-opened:before {
      border-top-color: #19799f;
    }
  
  }
  
  .css3menu {
      width: 100%;
      margin: 0;
      padding: 3px 0 3px 0;
      list-style: none;
      background: #111;
      background: -moz-linear-gradient(
          top,
          #2da2de 0%,
          #2da2de 16%,
          #2da2de);
      background: -webkit-gradient(
          linear, left top, left bottom,
          from(#2da2de),
          color-stop(0.16, #2da2de),
          to(#2da2de));
      background: -ms-linear-gradient(
          top,
          #2da2de 0%,
          #2da2de 16%,
          #2da2de 100%);
      background: -o-linear-gradient(
          top,
          #2da2de 0%,
          #2da2de 16%,
          #2da2de 100%);
      background: linear-gradient(
          to bottom,
          #2da2de 0%,
          #2da2de 16%,
          #2da2de 100%);
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      border-radius: 14px;
      border: 0px solid #2795ce;
      -moz-box-shadow:
          0px 0px 3px rgba(0,0,0,0.0),
          inset 0px 0px 2px rgba(254,255,255,1);
      -webkit-box-shadow:
          0px 0px 3px rgba(0,0,0,0.0),
          inset 0px 0px 2px rgba(254,255,255,1);
      box-shadow:
          0px 0px 3px rgba(0,0,0,0.0),
          inset 0px 0px 2px rgba(254,255,255,1);
  }
  .css3menu li{
      float: left;
      padding: 0px 8px 0px 0px;
      position: relative;
  }
  .css3menu li:first-child{
      margin: 0 0 0 25px;
      border-left: 0px;
  }
  .css3menu li:last-child{
      border-right: 0px;
  }
  .css3menu li:hover{
      background: -moz-linear-gradient(
          top,
          rgba(255, 56, 92, 0.10) 0%,
          rgba(37, 139, 193, 0.10) 25%,
          rgba(45, 162, 222, 0.10) 50%,
          rgba(48, 180, 250, 0.10) 75%,
          rgba(48, 180, 250, 0.10));
      background: -webkit-gradient(
          linear, left top, left bottom,
          from(rgba(255, 56, 92, 0.10)),
          color-stop(0.25, rgba(37, 139, 193, 0.10)),
          color-stop(0.50, rgba(45, 162, 222, 0.10)),
          color-stop(0.75, rgba(48, 180, 250, 0.10)),
          to(rgba(48, 180, 250, 0.10)));
      background: -ms-linear-gradient(
          top,
          rgba(255, 56, 92, 0.10) 0%,
          rgba(37, 139, 193, 0.10) 25%,
          rgba(45, 162, 222, 0.10) 50%,
          rgba(48, 180, 250, 0.10) 75%,
          rgba(48, 180, 250, 0.10) 100%);
      background: -o-linear-gradient(
          top,
          rgba(255, 56, 92, 0.10) 0%,
          rgba(37, 139, 193, 0.10) 25%,
          rgba(45, 162, 222, 0.10) 50%,
          rgba(48, 180, 250, 0.10) 75%,
          rgba(48, 180, 250, 0.10) 100%);
      background: linear-gradient(
          to bottom,
          rgba(255, 56, 92, 0.10) 0%,
          rgba(37, 139, 193, 0.10) 25%,
          rgba(45, 162, 222, 0.10) 50%,
          rgba(48, 180, 250, 0.10) 75%,
          rgba(48, 180, 250, 0.10) 100%);
  }
  .css3menu li:active{
      background: rgba(255, 0, 0, 0.10);
  }
  .css3menu a{
      float: left;
      padding: 10px 10px;
      color: #999;
      font-family: Arial, Helvetica, sans-serif;
      color: #ffffff;
      font-size: 16px;
      text-decoration: none;
      text-shadow:
          0px 0px 0px rgba(0,0,0,0.6),
          0px 0px 7px rgba(254,255,255,0.1);
  }
  .css3menu a:hover{
      color: #ffffff;
  }
  .css3menu a:active{
      color: #ffffff;
  }
  .css3menu li:hover &gt; ul{
      display: block;
  }
  .css3menu li:active &gt; ul{
      display: block;
  }
  .css3menu ul{
      list-style: none;
      margin: 0;
      padding: 0;
      display: none;
      position: absolute;
      top: 36px;
      left: 0;
      z-index: 99999;
      background: -moz-linear-gradient(
          top,
          #ffffff 0%,
          #ebf4c3);
      background: -webkit-gradient(
          linear, left top, left bottom,
          from(#ffffff),
          to(#ebf4c3));
      background: -ms-linear-gradient(
          top,
          #ffffff 0%,
          #ebf4c3 100%);
      background: -o-linear-gradient(
          top,
          #ffffff 0%,
          #ebf4c3 100%);
      background: linear-gradient(
          to bottom,
          #ffffff 0%,
          #ebf4c3 100%);
      -moz-border-radius: 0 0 5px 5px;
      -webkit-border-radius: 0 0 5px 5px;
      border-radius: 0 0 5px 5px;
      border: 1px solid #6d8000;
  }
  .css3menu ul li{
      border-left: 0px;
      border-right: 0px;
      float: none;
      margin: 0;
      padding: 0;
      display: block;
      -moz-box-shadow: 0 1px 0 #111111, 0 1px 0 #777777;
      -webkit-box-shadow: 0 1px 0 #111111, 0 1px 0 #777777;
      box-shadow: 0 1px 0 #111111, 0 1px 0 #777777;
  }
  .css3menu ul li:first-child{
      padding-left: 0px;
      margin: 0;
  }
  .css3menu ul li:last-child{
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
  }
  .css3menu ul li:hover{
      background: rgba(255, 0, 0, 0.10);
  }
  .css3menu ul li:active{
      background: rgba(255, 0, 0, 0.10);
  }
  .css3menu ul a{
      color: #141414;
      padding: 10px;
      height: auto;
      line-height: 1;
      display: block;
      white-space: nowrap;
      float: none;
      text-transform: none;
      height: 16px;
      width: 180px;
  }
  .css3menu ul a:hover{
      color: #141414;
  }
  .css3menu ul a:active{
      color: #ffffff;
  }
  .css3menu ul li:first-child a{
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
  }
  .css3menu ul li:first-child a:hover:after{
      border-bottom-color: #04acec;
  }
  .css3menu ul li:last-child a{
      -moz-border-radius: 0 0 5px 5px;
      -webkit-border-radius: 0 0 5px 5px;
      border-radius: 0 0 5px 5px;
  }
  .css3menu:after{
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
  }
  
  
  .mainmenuicondata {
      line-height: 16px;
      float: left;
      padding-right: 10px;
  }
  .submenuicondata {
      line-height: 16px;
      float: left;
      padding-right: 10px;
  }
  
  .mainmenuicondata.icon1 {
      padding-right: 18px;
      background: url("bottom.png") no-repeat 0 -4px;
      background-size: 8px 8px;
      background-position: right center;
      min-height: 8px;
  }
  
  @media screen and (max-width: 682px){
      .css3menu a{
          display: inline-block;
          float: none;
          text-align: center;
      }
      .css3menu {
          text-align: center;
      }
      .css3menu &gt; li{
          float: none;
          width: 60%;
          margin: 0 auto;
      }   
      .css3menu &gt; li:first-child{
          margin: 0 auto;
      }
  }
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>(function($) {
  
    $.fn.menumaker = function(options) {
  
        var cssmenu = $(this), settings = $.extend({
          title: "Menu",
          format: "dropdown",
          sticky: false
        }, options);
  
        return this.each(function() {
          cssmenu.prepend('&lt;div id="menu-button"&gt;' + settings.title + '&lt;/div&gt;');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) { 
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });
  
          cssmenu.find('li ul').parent().addClass('has-sub');
  
          multiTg = function() {
            cssmenu.find(".has-sub").prepend('&lt;span class="submenu-button"&gt;&lt;/span&gt;');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };
  
          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
  
          if (settings.sticky === true) cssmenu.css('position', 'fixed');
  
          resizeFix = function() {
            if ($( window ).width() &gt; 768) {
              cssmenu.find('ul').show();
            }
  
            if ($(window).width() &lt;= 768) {
              cssmenu.find('ul').hide().removeClass('open');
            }
          };
          resizeFix();
          return $(window).on('resize', resizeFix);
  
        });
    };
  })(jQuery);
  
  (function($){
  $(document).ready(function(){
  
  $("#cssmenu").menumaker({
     title: "Menu",
     format: "multitoggle"
  });
  
  
  });
  })(jQuery);
  </code></pre>