Membuat dropdown menu Level 2 terdapat animasi (CSS,HTML)

 


code:

<!DOCTYPE html>
<html>
<head>
  <title>Percobaan</title>
  <meta charset="utf-8">
  <style type="text/css">
    .drop button{
      padding:20px 40px;
      background-color:red;
      background-attachment:fixed;
      border:none;
      position:relative;
      z-index:2;
    }
    .drop button:hover{
      background-color:green;
      color:white;
    }
    .drop{
      background-color:blue;
      width:146px;
      height:56px;
    }
    .menu a{
      background-color:red;
      display:block;
      padding:20px 50px;
      text-decoration:none;
    }
    .menu{
      width:147px;
      bottom:400px;
      position:relative;
      z-index:1;
      transition:bottom 2s;
    }
    .menu a:hover{
      background-color:green;
      color:white;
    }
    .drop:hover .menu{
      bottom:0px;
    }
    .overflow{
      overflow:hidden;
      height:500px;
    }
  </style>
</head>
<body>
  <div class="overflow">
      <div class="drop">
        <button>Helloworld</button>
        <div class="menu">
          <a href="">Click</a>
          <a href="">Click</a>
          <a href="">Click</a>
          <a href="">Click</a>
          <a href="">Click</a>
          <a href="">Click</a>
        </div>
      </div>
  </div>
</body>
</html>

Komentar