Responsive nav bar crashing onClick

So I have recently built myself a personal website having graduated coding bootcamp (Flatiron School) and am having issues with my responsive navbar. Then UL renders fine, but when clicked it disappears and the page doesnt move to where necessary (about me, contact etc...) please see code below!

 <nav>
       <a id="menu-icon"></a>
             <ul>
                   <li><a class="nav" href="#home">Home</a></li>
                   <li><a class="nav" href="#abt">About</a></li>
                   <li><a class="nav" href="#exp">Experience</a></li>
                   <li><a class="nav" href="#contact-form">Contact</a></li>
            </ul>
</nav>



nav ul,
nav:active ul {
    display: none;
    z-index: 1000;
    position: absolute;
    padding: 20px;
    background: #F5F5F5;
    border: 1px solid #54A4A6;
    right: 20px;
    width: 50%;
    border-radius: 5px;
}