Как переключать меню

Question

Я хочу добавить код переключения в мое меню, но он не работает, вы можете мне помочь, пожалуйста, это мой код меню:

#ABT-Container {
  font-family: 'Roboto', sans-serif;
  background: transparent;
  width: 100%;
  float: right;
}

a {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: #333;
}

#nav {
  float: right;
  font-family: 'Roboto', sans-serif;
  padding: 2px 6px 0;
  line-height: 100%;
  border-radius: 1em;
  background: white;
  /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF');
  /* for IE */
  back round: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF));
  /* for webkit     
        browsers */
  background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
  /* for firefox 3.6+ */
  border: solid 1px white;
}

#nav li {
  font-family: 'Roboto', sans-serif;
  margin: 0 5px;
  padding: 0 0 8px;
  float: right;
  position: relative;
  list-style: none;
}


/* main level link */

#nav a {
  font-family: 'Roboto', sans-serif;
  color: #353535;
  text-decoration: none;
  display: block;
  padding: 8px 20px;
  margin: 0;
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
}


/* sub levels link hover */

#nav ul li:hover a,
#nav li:hover li a {
  font-family: 'Roboto', sans-serif;
  background: none;
  border: none;
  color: #666;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}


/* level 2 list */

#nav ul {
  font-family: 'Roboto', sans-serif;
  background: #FFFFFF;
  /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF');
  /* for IE */
  background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF));
  /* for webkit 
    browsers 
    */
  background: -moz-linear-gradient(top, #fff, #FFFFFF);
  /* for firefox 3.6+ */
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 35px;
  right: 0;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}


/* dropdown */

#nav li:hover>ul {
  font-family: 'Roboto', sans-serif;
  display: block;
}

#nav ul li {
  font-family: 'Roboto', sans-serif;
  float: none;
  margin: 0;
  padding: 0;
}

#nav ul a {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}


/* level 3+ list */

#nav ul ul {
  font-family: 'Roboto', sans-serif;
  right: 181px;
  top: -3px;
}


/* rounded corners for first and last child */

#nav ul li:first-child>a {
  -webkit-border-top-right-radius: 1px;
  -moz-border-radius-topleft: 1px;
  -webkit-border-top-left-radius: 1px;
  -moz-border-radius-topright: 1px;
}

#nav ul li:last-child>a {
  -webkit-border-bottom-right-radius: 1px;
  -moz-border-radius-bottomleft: 1px;
  -webkit-border-bottom-left-radius: 1px;
  -moz-border-radius-bottomright: 1px;
}


/* clearfix */

#nav:after {
  font-family: 'Roboto', sans-serif;
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#nav {
  font-family: 'Roboto', sans-serif;
  display: inline-block;
}

html[xmlns] #nav {
  font-family: 'Roboto', sans-serif;
  display: block;
}

* html #nav {
  height: 1%;
}

.menu_line {
  width: 25px;
  height: 2px;
  background-color: black;
  color: black;
  margin: 4px 0;
}

<header id="header">
  <nav id="bg1" class="navbar effect1">
    <div id="ABT-Container">
      <ul id="nav">
        <li class="w3-animate-right">
          <a href="#">
            <p class="menu_line"></p>
            <p class="menu_line"></p>
            <p class="menu_line"></p>
          </a>
          <ul>
            <li><a href="#">About US</a>
              <ul>
                <li>
                  <ul>
                    <li><a href="#">Sub Sub-Row 1</a></li>
                    <li><a href="#">Sub Sub-Row 1</a></li>
                    <li><a href="#">Sub Sub-Row 1</a></li>
                </li>
                </ul>
            </li>

            <li></li>
            <li></li>
            </ul>
        </li>

        <li><a href="#">Multi-Levels</a>
          <ul>
            <li><a href="#">Sales</a></li>
            <li><a href="#">Another Link</a></li>
            <li><a href="#">Department</a>
            </li>
          </ul>
        </li>
        </li>
        </ul>
      </ul>
      </ul>



    </div>
  </nav>

</header>
</body>

</html>