I created a navbar and all the tabs are inline. When the window size is reduced, a bars icon appears and the tabs display vertically instead of horizontally. I want the output so that when the window size is reduced, the bars icon appears but the tabs disappear and can only be seen (vertically) and unseen when the bars icon is clicked.
I tried jquery, but it didn't work. I'm not sure how to do this, can you help me?

```css
body {
  margin: 0;
  padding: 0;
  font-family: Sans-Serif;
}

nav {
  margin-left: 45px;
  ;
  width: 90%;
  background: #D1D0D3;
}

ul {
  list-style-type: none;
  width: 80%;
  margin: 0 auto;
  color: black;
  padding: 0;
}

ul a {
  color: black;
  text-decoration: none;
}

ul li {
  display: inline-block;
  padding: 20px;
}

ul li:hover {
  background-color: yellow;
}

.toggle {
  width: 100%;
  padding: 10px 20px 0px 20px;
  background-color: #C2ABF1;
  text-align: right;
  box-sizing: border-box;
  color: white;
  font-size: 30px;
  display: none;
}

@media (max-width: 800px) {
  .toggle {
    display: block;
  }
  .block {
    display: block;
  }
}
```

```html
<div class="toggle">
  <i class="fa fa-bars menu" id="menu"></i>
</div>
<nav>
  <ul class="ul">
    <li class="block"><a href="#">Home</a></li>
    <li class="block"><a href="#">About</a></li>
    <li class="block"><a href="#">Makeup</a></li>
    <li class="block"><a href="#">Hairstyle</a></li>
    <li class="block"><a href="#">Contact</a></li>
  </ul>
</nav>
```