Can somebody help me with navigator bar

HTML-CSS
1

I cant use hover efect on navigator bar can somebody help

slanted menu 
    <div class="navigation-wrapper">
        <div class="navigation-button">
            <i class="fa fa-bars"></i>
        </div>
        <div class="navigation-menu">
            <ul>
                <li><a href="https://www.youtube.com/watch?v=DiSvq5SgLMI">HOME</a></li>
                <li><a href="gallery.html">GALLERY</a></li>
                <li><a href="contact.html">CONTACT</a></li>
                <li><a href="location.html">LOCATION</a></li>
                <li><a href="Testimonal.html">TESTIMONIAL</a></li>
                <li><a href="Pricing.html">PRICING</a></li>
            </ul>
        </div>
    </div>
    <section class="hero">
        <h1>KOD GAŠE</h1>
        <div class="button">
            <a href="" class="btn1">Get Started</a>
            <a href="" class="btn2">Get Featured</a>
        </div>


    </section>


</div>
<script>
    var navButton = document.querySelector('.navigation-button');
    var navMenu = document.querySelector('.navigation-menu');
    var win = window;

    function openMenu(event) {

        navButton.classList.toggle('active');
        navMenu.classList.toggle('active');

        event.preventDefault();
        event.stopImmediatePropagation();
    }

    function closeMenu(event) {
        if (navButton.classList.contains('active')) {
            navButton.classList.remove('active');
            navMenu.classList.remove('active');
        }
    }
    navButton.addEventListener('click', openMenu, false);

    win.addEventListener('click', closeMenu, false);
</script>

CSS

body {
background-image: url(hvar1.jpg);
background-size: cover;
font-family: ‘Roboto Condensed’, sans-serif;
font-weight: bold;
height: 100vh;
}

.container {
width: 80%;
height: 40px;
position: relative;
top: 40px;
margin: 0 auto;
}

.sea {
width: 220px;
bottom: 340px;
}

#logo {
position: absolute;
top: 0;
left: 0;
color: white;
font-family: Arial, Helvetica, sans-serif;
}

.navigation-wrapper {
position: relative;
}

.navigation-button {
will-change: transform;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
position: fixed;
z-index: 1;
top: 40px;
right: 100px;
background: transparent;
cursor: pointer;
}

.navigation-button .fa {
border: 2px solid white;
border-radius: 3px;
padding: 10px;
color: white;
}

.navigation-menu ul li:hover {
background: #f20c4a;
}

.navigation-menu ul li {
list-style: none;
font-family: impact;
font-weight: 300;
color: hsl(0, 0%, 70%);
}

.navigation-menu {
content: ‘’;
position: fixed;
top: 0;
right: 0;
width: 50%;
background: #fff;
height: 100%;
transform: skewX(0deg) translate(100%, 0);
transform-origin: top right;
transition: all .2s ease-in;
z-index: -1;
}

.navigation-menu ul {
transform: skewX(-8deg);
transform-origin: top left;
position: fixed;
right: 120px;
top: 120px;
width: 400px;
text-align: right;
}

.navigation-menu ul li {
position: relative;
z-index: 999;
font-size: 32px;
color: hsl(0, 0%, 10%);
line-height: 64px;
}

.navigation-menu ul li a {
border: none;
color: hsl(0, 0%, 10%);
text-decoration: none;
}

.navigation-menu.active {
transform: skewX(8deg) translate(0, 0);
}

.navigation-menu li {
opacity: 0;
transform: translate(0, 10px);
transition: all .0s ease-in .3s;
}

.navigation-menu.active li {
opacity: 1;
transform: translate(0, 0);
transition: all .2s ease-in 0s;
}

.navigation-menu.active li:nth-child(1) {
transition-delay: .3s;
}

.navigation-menu.active li:nth-child(2) {
transition-delay: .4s;
}

.navigation-menu.active li:nth-child(3) {
transition-delay: .5s;
}

.navigation-menu.active li:nth-child(4) {
transition-delay: .6s;
}

.navigation-menu.active li:nth-child(5) {
transition-delay: .7s;
}

.navigation-menu.active li:nth-child(6) {
transition-delay: .8s;
}

.hero h1 {
margin-top: 200px;
text-transform: uppercase;
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
font-size: 1px;
letter-spacing: 3.5px;
}

.button {
font-family: ‘Roboto Condensed’, sans-serif;
font-weight: normal;
font-size: 12px;
margin-top: 40px;
}

.btn1:hover {
text-decoration: none;
color: black;
}

.btn2:hover {
text-decoration: none;
color: white;
}

.btn1 {
padding: 12px 25px;
background: #f20c4a;
text-decoration: none;
color: white;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

.btn2 {
padding: 12px 25px;
background: #f4f6f8;
text-decoration: none;
color: #000;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}