If you have copied the CSS from the CodePen website directly, the format is not just plain CSS, but Less which is a stylesheet preprocessor. That means that you can write CSS in another way and let the tooling build and process (convert) it for you into CSS. Read more about CSS preprocessors at Mozilla Developers Network.

If you want the code to just directly work in your HTML file, you should select the dropdown on the top right of the CSS pane and select option View compiled CSS. Then you can copy the outcome to your HTML file and paste it inside your <style> declaration.

See below for the outcome of the CodePen example.

* {
  box-sizing: border-box;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0KEwA.ttf) format('truetype');
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'PT Sans', Arial, Verdana;
  background-color: #eee;
}
h1 {
  text-align: center;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #222;
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 120px;
  margin: auto;
  position: relative;
  background-color: #2c3e50;
  z-index: 7;
}
.menu li {
  float: left;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.menu a {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  font-size: 18px;
  z-index: 9;
}
a.active {
  background-color: #e74c3c;
  pointer-events: none;
}
li.slider {
  width: 25%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #e74c3c;
  z-index: 8;
  transition: left 0.4s, background-color 0.4s;
}
.menu li:nth-child(1):hover ~ .slider,
.menu li:nth-child(1):focus ~ .slider,
.menu li:nth-child(1):active ~ .slider {
  left: 0;
  background-color: #3498db;
}
.menu li:nth-child(2):hover ~ .slider,
.menu li:nth-child(2):focus ~ .slider,
.menu li:nth-child(2):active ~ .slider {
  left: 25%;
  background-color: #9b59b6;
}
.menu li:nth-child(3):hover ~ .slider,
.menu li:nth-child(3):focus ~ .slider,
.menu li:nth-child(3):active ~ .slider {
  left: 50%;
  background-color: #e67e22;
}
.menu li:nth-child(4):hover ~ .slider,
.menu li:nth-child(4):focus ~ .slider,
.menu li:nth-child(4):active ~ .slider {
  left: 75%;
  background-color: #16a085;
}

<h1>Responsive Menu Effect
hover on menu items!
</h1>

<ul class="menu">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li class="slider"></li>
</ul>

It’s a LESS code not a CSS. Look up how to convert less to css, but I think if you export the code from codepen there will be the converted css in the folder.

I have copied this code from a free website, it is completely working on this website, but when I use it on my website, it gives me errors such as; unexpected token and ‘}’expected.. I will add both HTML and CSS codes below, and I will also add the original navigation that I copied the code from, thank you in advance, really appreciate your time and consideration.

This is the website that I got the code from, please take a look:

https://codepen.io/bonkalol/pen/adHBz

/* CSS Code  */

* {
  box-sizing: border-box;
}

@import url(https://fonts.googleapis.com/css?family=PT+Sans);

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'PT Sans', Arial, Verdana;
  background-color: #eee;
}

h1 {
  text-align: center;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #222;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 120px;
  margin: auto;
  position: relative;
  background-color: #2c3e50;
  z-index: 7;

  li {
    float: left;
    width: 25%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
    font-size: 18px;
    z-index: 9;
  }
}

a.active {
  background-color: #ffc312;
  pointer-events: none;
  color: black;

}

li.slider {
  width: 25%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #e74c3c;
  z-index: 8;
  transition: left .4s, background-color .4s;
}

.menu li:nth-child(1):hover,
.menu li:nth-child(1):focus,
.menu li:nth-child(1):active {
  & ~ .slider {
    left: 0;
    background-color: #3498db;
  }
}


.menu li:nth-child(2):hover,
.menu li:nth-child(2):focus,
.menu li:nth-child(2):active {
  & ~ .slider {
    left: 25%;
    background-color: #9b59b6;
  }
}

.menu li:nth-child(3):hover,
.menu li:nth-child(3):focus,
.menu li:nth-child(3):active {
  & ~ .slider {
    left: 50%;
    background-color: #e67e22;
  }
}

.menu li:nth-child(4):hover,
.menu li:nth-child(4):focus,
.menu li:nth-child(4):active {
  & ~ .slider {
    left: 75%;
    background-color: #16a085;
  }
}

/* HTML Code */

<!DOCTYPE html>
<html lang="en" >
<head>

    <title>Login</title>

    <meta charset="UTF-8">
    <title>BootStrap</title>

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="Header.css";
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


</head>
<body>

<header>


    <ul class="menu">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Signup/Signin</a></li>
        <li class="slider"></li>
    </ul>

</header>