<div class="container">
  <div class="navbar">
    <div class="header">
      <ul class="menu">
        <li>Home</li>
        <li>About</li>
        <li>Blog</li>
        <li>Projects</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>

  <div class="navbar1">
    <div class="header1">
      <ul class="menu1">
        <li>Home</li>
        <li>About</li>
        <li>Blog</li>
        <li>Projects</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>

  <div class="navbar2">
    <div class="header2">
      <ul class="menu2">
        <li>Home</li>
        <li>About</li>
        <li>Blog</li>
        <li>Projects</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>

  <div class="navbar3">
    <div class="header3">
      <ul class="menu3">
        <li>Home</li>
        <li>About</li>
        <li>Blog</li>
        <li>Projects</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>

  <div class="navbar4">
    <div class="header4">
      <ul class="menu4">
        <li>Home</li>
        <li>About</li>
        <li>Blog</li>
        <li>Projects</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>

</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: #4776e6;
  background: -webkit-linear-gradient(to right, #8e54e9, #4776e6);
  background: linear-gradient(to right, #8e54e9, #4776e6);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.navbar,
.navbar1,
.navbar2,
.navbar3,
.navbar4 {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  background-color: #8e54ff;
}

.header,
.header2,
.header3,
.header4,
.header1 {
  width: 100%;
  height: 60px;
}

.menu,
.menu2,
.menu3,
.menu4,
.menu1 {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0 100px;
}

.menu li,
.menu2 li,
.menu3 li,
.menu4 li,
.menu1 li {
  display: block;
  height: 100%;
  font-size: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 15px #8e54e9;
  transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
  text-align: center;
  padding: 0 10px;
  margin-right: 30px;
}

/* Style 1 */
/* Before Hover: Width of before element is set to 100% and height to 0 and Width of before element is*/
/* set to 0% and height to 100%  */
/* On Hover:  Top and bottom borders' of after element and left and right borders of before element*/
/* is animated here by increasing the height of before element from 0 to 80% and width of after */
/* element from 0 to 120% */

.menu li:after,
.menu li:before {
  content: "";
  position: absolute;
  display: block;
  border: 0px solid transparent;
}

.menu li:after {
  width: 0%;
  height: 80%;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transition: all 0.3s ease;
}

.menu li:before {
  width: 120%;
  height: 0%;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  transition: all 0.5s ease;
}

.menu li:hover::before {
  height: 80%;
}

.menu li:hover::after {
  width: 120%;
}

/* Style 2: */
/* On Hover: Top and left border of after element and right, bottom borders of before element is */
/* incresed from 0 to 10px */

.menu1 li:after,
.menu1 li:before {
  content: "";
  position: absolute;
  display: block;
  border: 0px solid transparent;
  width: 0%;
  height: 0%;
  transition: all 0.3s ease;
}

.menu1 li:after {
  width: 0%;
  height: 0%;
  top: 0;
  left: 0;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
}

.menu1 li:before {
  width: 0%;
  height: 0%;
  right: 0;
  bottom: 0;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
}

.menu1 li:hover::before,
.menu1 li:hover::after {
  width: 10px;
  height: 10px;
  border-color: #fff;
}

/* Style 3 */
/* Before hover: After element's top and left borders are set, same as before elements's */
/* right and bottom borders, width and height of both elements are set to 0% */
/* On Hover: the before and after elements's height and width increased from 0 to 100%  */
.menu2 li:after,
.menu2 li:before {
  content: "";
  position: absolute;
  display: block;
  border: 0px solid transparent;
  width: 0%;
  height: 0%;
  transition: all 0.5s ease;
}

.menu2 li:after {
  width: 0%;
  height: 0%;
  top: 0;
  left: 0;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
}

.menu2 li:before {
  width: 0%;
  height: 0%;
  right: 0;
  bottom: 0;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
}

.menu2 li:hover::before,
.menu2 li:hover::after {
  width: 100%;
  height: 100%;
  border-color: #fff;
}

/*Style 4  */
/* Before Hover: All border except the bottom border is transparent */
/* On Hover: All border except bottom border is changed to white */

.menu3 li {
  border: 2px solid transparent;
  border-bottom: 2px solid #fff;
  margin-right: 0px;
  padding-right: 30px;
  transition: border 0.3s ease;
}

.menu3 li:hover {
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-bottom: 2px solid transparent;
}

/* Style 5 */
/* On Hover the after element is moved from top 100% to 0%  */
.menu4 li:after {
  content: "";
  position: absolute;
  display: block;
  border: 2px solid #fff;
  width: 100%;
  height: 0%;
  transition: all 0.5s ease;
  top: 100%;
}

.menu4 li:hover::after {
  width: 100%;
  top: 0;
}