A Pen by Rohan Puri

Thumbnail
This awesome code was written by -HAN-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -HAN- ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Rohan Puri</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="itemHolder">
  <a href="#nogo" class="hoverLink">Item</a>
  <ul class="list">
  <li><a href="#nogo">itemx</a></li>
    <li><a href="#nogo">itemx</a></li>
    <li><a href="#nogo">itemx</a></li>
    <li><a href="#nogo">itemx</a></li>
    <li><a href="#nogo">itemx</a></li>
  </ul>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-HAN-/a-pen-by-rohan-puri-GqwoNo */
body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body .itemHolder {
  position: relative;
}
body .itemHolder .hoverLink {
  background: gray;
  color: white;
  text-decoration: none;
  padding: 10px;
}
body .itemHolder .list {
  background: #333;
  position: absolute;
  left: 0;
  top: 50px;
  visibility: hidden;
  opacity: 0;
}
body .itemHolder .list a {
  color: #fff;
  text-decoration: none;
  padding: 15px;
  display: inline-block;
  border-bottom: 1px solid #000;
}
body .itemHolder .list:hover {
  visibility: visible;
  opacity: 1;
}
body .itemHolder .list:hover a {
  -webkit-animation: lola 0.3s ease forwards;
          animation: lola 0.3s ease forwards;
}
@-webkit-keyframes lola {
  0% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes lola {
  0% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

Comments