Simple Responsive nav

/*Downloaded from https://www.codeseek.co/-J0hn-/simple-responsive-nav-WRdKeB */
body{
  font-family:sans-serif;
  text-transform:capitalize;
}
button:focus{
  outline:0;
}
ul{
  list-style:none;
  padding:0;
  margin:0;
  color:white;
}
li{
  cursor:pointer;
  margin:0;
}
li:hover{
  background:gray;
}
#main-nav{
  text-align:center;
  display:flex;
}
#main-nav li{
  flex:1;
  padding:.70em 4em;
}
i{
  margin-left:1em;
}
nav {
  position:relative;
  background:black;
  padding:0;
  margin:0;
}
.fa-bars{
  color:white;
  background:none;
  border:0;
  padding:1em;
  margin:0 auto;
  display:none;
}
#second-nav{
  position:absolute;
  top:100%;
  left:25%;
  right:50%;
  display:none;
  background:black;
}
#second-nav.open{
  display:block;
}
#second-nav li{
  padding:.70em 4em;
  display:block;
  text-align:center;
}
@media(max-width:768px){
  nav{
    position:relative;
    width:50px;
  }
  .fa-bars{
    cursor:pointer;
    text-align:center;
    display:block;
  }
  #main-nav{
    position:absolute;
    display:none;
    text-align:left;
    width:200px;
    background:black;
  }
  #main-nav.show{
    display:block;
  }
  #second-nav{
    position:absolute;
    right:0;
    left:100%;
    top:25%;
    z-index:100;
    width:200px;
  }
  .fa-caret-down{
    transform:rotate(-90deg);
  }
  .fa-caret-up{
    transform:rotate(-90deg);
  }
}

/*Downloaded from https://www.codeseek.co/-J0hn-/simple-responsive-nav-WRdKeB */
$(document).ready(function(){
  
  $('#main-nav li:nth-child(2)').on('click',function(){
    var arrow =$(this).children().first();
    
    $('#second-nav').toggleClass('open');
    
    if($(arrow).hasClass('fa-caret-down')){
      $(arrow).removeClass('fa-caret-down').addClass('fa-caret-up');
    } else if($(arrow).hasClass('fa-caret-up')){
      $(arrow).removeClass('fa-caret-up').addClass('fa-caret-down');
    }
  });
  
  $('button').on('click',function(){
    $('#main-nav').toggleClass('show');
  })
   
});