CSS_Dropdown_component_by_hasrat/Dropdown.html at main · Hasrat270/CSS_Dropdown_component_by_hasrat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
   <style type="text/css">
      .dd {
         position: relative;
         display: inline-block;
      }
      .dd-btn {
         padding: 15px;
         text-align: center;
         background: #173459;
         border: none;
         width: 300px;
         color: #f8f9f9;
      }
      .dd-content {
         position: absolute;
         width: 100%;
         box-shadow: 0 18px 36px rgba(0,0,0,0.30), 0 14px 11px rgba(0,0,0,0.22);
         height: 0px;
         transition: height 1s;
         overflow: hidden;
      }
      .dd:hover > .dd-content {
         height: 150px;
      }
      .dd-content > a {
         display: block;
         padding: 15px;
         text-decoration: none;
         color: black;
      }
   </style>
</head>
<body>
   <div class="dd">
      <button class="dd-btn"> Hover or Tap me! </button>
      <div class="dd-content">
         <a href="#"> Home </a>
         <a href="#"> About </a>
         <a href="#"> Articles </a>
      </div>
   </div>
</body>
</html>