So I tried to make a mobile menu and everything went perfectly fine, but when I click it it sends me to the top of the page instead of dropping down the menu. The CDN is linked properly (checked that with jQuery alert) so it's anchor tags fault or the jQuery code. Can you guys check it?

```js
$(document).ready(function() {
  $('#i-nav').click(function() {
    $('ul').toggleClass('show');
  });
});
```

```css
html,
body {
  min-width: 320px;
  min-height: 320px;
  margin: 0;
  font-family: 'Lato', sans-serif;
  background-color: #f1f1f1;
}
.show {
  display: block;
}
.testnav ul {
  list-style: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
  margin-right: 50px;
}
.testnav ul li {
  display: inline;
  float: left;
  width: auto;
  height: 100px;
}
.testnav ul li a {
  line-height: 100px;
  display: block;
  float: left;
  padding: 0 20px;
  color: #626262;
}
#home:hover,
#menu2:hover,
#menu3:hover,
#menu4:hover,
#menu5:hover {
  color: white;
  border-bottom: 5px solid #b0b0b0;
}
#home:hover {
  background-color: rgba(223, 187, 66, 0.65);
}
#menu2:hover {
  background-color: rgba(196, 52, 52, 0.65);
}
#menu3:hover {
  background-color: rgba(80, 139, 97, 0.65);
}
#menu4:hover {
  background-color: rgba(89, 148, 160, 0.65);
}
#menu5:hover {
  background-color: rgba(87, 95, 189, 0.65);
}
#i-nav {
  float: left;
  z-index: 101;
  line-height: 100px;
  text-align: center;
  display: none;
}
#logo {
  float: left;
  margin-left: 50px;
  margin-top: 15px;
}
a {
  text-decoration: none;
  text-transform: uppercase;
}
.floatright-wrapper {
  float: right;
}
.testnav {
  width: 100%;
  height: 100px;
  background: white;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .floatright-wrapper {
    float: none;
  }
  .testnav ul {
    width: 100%;
    text-align: center;
    margin: 0;
    display: none;
  }
  .testnav ul li {
    width: 100%;
  }
  .testnav ul li a {
    width: 100%;
    text-align: center;
    outline: solid white 1px;
  }
  #logo {
    margin: 10px;
  }
  #i-nav {
    float: right;
    margin-right: 40px;
    display: block;
    font-size: 30px;
    color: black;
  }
}
@media screen and (max-width: 400px) {
  #logo {
    width: 50%;
    margin-top: 27px;
  }
}
```

```html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testnav" id="menu">
  <img src="css/images/logo.png" alt="logo" id="logo">
  <a href="#" id="i-nav"><i class="fa fa-bars icon-2x" aria-hidden="true"></i>
</a>
  <nav>
    <ul>
      <div class="floatright-wrapper">
        <li><a href="#" target="_top" id="home">Home</a></li>
        <li><a href="#" target="#text-boxes" id="menu2">Menu2</a></li>
        <li><a href="#" target="picture-boxes-section" id="menu3">Menu3</a></li>
        <li><a href="#" id="menu4">Menu4</a></li>
        <li><a href="#" id="menu5">Menu5</a></li>
      </div>
    </ul>
  </nav>
</div>
```