• CSS
  • JS
​x
20
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Animated Dropdown Menu</title>
7
  <link rel="stylesheet" href="styles.css">
8
</head>
9
<body>
10
  <div class="dropdown">
11
    <button class="dropdown-btn">Hover Me!</button>
12
    <div class="dropdown-content">
13
      <a href="#">Home</a>
14
      <a href="#">About</a>
15
      <a href="#">Services</a>
16
      <a href="#">Contact</a>
17
    </div>
18
  </div>
19
</body>
20
</html>
xxxxxxxxxx
1
80
 
1
/* General Styles */
2
body {
3
  font-family: 'Poppins', sans-serif;
4
  display: flex;
5
  justify-content: center;
6
  align-items: center;
7
  height: 100vh;
8
  margin: 0;
9
  background: linear-gradient(135deg, #007BFF, #00FF88);
10
}
11
​
12
/* Dropdown Container */
13
.dropdown {
14
  position: relative;
15
  display: inline-block;
16
}
17
​
18
/* Dropdown Button */
19
.dropdown-btn {
20
  padding: 15px 30px;
21
  font-size: 16px;
22
  font-weight: bold;
23
  color: #fff;
24
  background-color: #333;
25
  border: none;
26
  border-radius: 5px;
27
wnwnwnwn   cursor: pointer;
28
  transition: background-color 0.3s ease;
29
}
30
​
31
.dropdown-btn:hover {
32
  background-color: #555;
33
}
34
​
35
/* Dropdown Content */
36
.dropdown-content {
37
  position: absolute;
38
  top: 100%;
39
  left: 0;
40
  width: 100%;
41
  background-color: #fff;
42
  border-radius: 5px;
43
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
44
  opacity: 0;
45
  visibility: hidden;
46
  transform: translateY(-10px);
47
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
48
}
49
​
50
/* Dropdown Links */
51
.dropdown-content a {
52
  display: block;
53
  padding: 10px 15px;
54
  color: #333;
55
  text-decoration: none;
56
  transition: background-color 0.3s ease;
57
}
58
​
59
.dropdown-content a:hover {
60
  background-color: #f1f1f1;
61
}
62
​
63
/* Show Dropdown on Hover */
64
.dropdown:hover .dropdown-content {
65
  opacity: 1;
66
  visibility: visible;
67
  transform: translateY(0);
68
}
69
​
70
/* Optional: Add Icons to Dropdown Items */
71
.dropdown-content a::before {
72
  content: "→";
73
  margin-right: 10px;
74
  opacity: 0;
75
  transition: opacity 0.3s ease;
76
}
77
​
78
.dropdown-content a:hover::before {
79
  opacity: 1;
80
}
xxxxxxxxxx
1
 
1
​
Write your code & show your skills
Description

Created best dropdown animation using pure css and html


Do You Like This Work ? Hired Me.

This User Available To Hire




COMMENTS ( 0 )


Sign up to join the conversation

Add your feedback to this Design’s project by signing in or signing up.

Ads
Share

0
0
32
Published:

0
%