diff --git a/animation/02-drop-down/index.html b/animation/02-drop-down/index.html
index a812e22..ac776df 100644
--- a/animation/02-drop-down/index.html
+++ b/animation/02-drop-down/index.html
@@ -11,10 +11,10 @@
     <div class="dropdown-container">
       <div class="dropdown-menu">
         <button class="dropdown-button">Dropdown</button>
-        <div class="dropdown-content">
-          <a href="#">Link 1</a>
-          <a href="#">Link 2</a>
-          <a href="#">Link 3</a>
+        <ul class="dropdown-content">
+          <li>Item 1</a>
+          <li>Item 2</a>
+          <li>Item 3</a>
         </div>
       </div>
     </div>
diff --git a/animation/02-drop-down/solution/solution.css b/animation/02-drop-down/solution/solution.css
index 349b53e..447d4d2 100644
--- a/animation/02-drop-down/solution/solution.css
+++ b/animation/02-drop-down/solution/solution.css
@@ -1,5 +1,7 @@
-body {
+* {
+  padding: 0;
   margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 .dropdown-container {
@@ -12,7 +14,6 @@ body {
 
 .dropdown-menu {
   position: relative;
-  display: inline-block;
 }
 
 .dropdown-button {
@@ -22,30 +23,25 @@ body {
   border: none;
 }
 
-.dropdown-content {
-  visibility: hidden;
+ul {
   position: absolute;
   left: -25%;
   background-color: rgb(189, 188, 188);
   width: 160px;
-  display: flex;
-  flex-direction: column;
-  /* max-height: 0; */
-  /* transition: max-height 0.25s ease-out; */
-}
-
-a {
-  font-family: Arial, Helvetica, sans-serif;
-  color: black;
-  padding: 12px 16px;
-  text-decoration: none;
+  list-style: none;
   text-align: center;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.25s ease-out;
 }
 
-.dropdown-menu:hover .dropdown-content {
-  visibility: visible;
-  /* max-height: 500px;
-  transition: max-height 0.25s ease-out; */
+li {
+  padding: 16px;
+}
+
+.dropdown-menu:hover ul {
+  max-height: 500px;
+  transition: max-height 0.5s ease-out;
 }
 
 .dropdown-menu:hover .dropdown-button {
@@ -53,6 +49,7 @@ a {
   background-color: rgb(59, 232, 255);
 }
 
-.dropdown-content a:hover {
+.dropdown-content li:hover {
+  cursor: pointer;
   background-color: #ddd;
 }
diff --git a/animation/02-drop-down/solution/solution.html b/animation/02-drop-down/solution/solution.html
index 53b9d89..3ef4ae0 100644
--- a/animation/02-drop-down/solution/solution.html
+++ b/animation/02-drop-down/solution/solution.html
@@ -11,10 +11,10 @@
     <div class="dropdown-container">
       <div class="dropdown-menu">
         <button class="dropdown-button">Dropdown</button>
-        <div class="dropdown-content">
-          <a href="#">Link 1</a>
-          <a href="#">Link 2</a>
-          <a href="#">Link 3</a>
+        <ul class="dropdown-content">
+          <li>Item 1</a>
+          <li>Item 2</a>
+          <li>Item 3</a>
         </div>
       </div>
     </div>
diff --git a/animation/02-drop-down/style.css b/animation/02-drop-down/style.css
index 3200457..5737e96 100644
--- a/animation/02-drop-down/style.css
+++ b/animation/02-drop-down/style.css
@@ -1,5 +1,7 @@
-body {
+* {
+  padding: 0;
   margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 .dropdown-container {
@@ -12,7 +14,6 @@ body {
 
 .dropdown-menu {
   position: relative;
-  display: inline-block;
 }
 
 .dropdown-button {
@@ -22,20 +23,15 @@ body {
   border: none;
 }
 
-.dropdown-content {
-  visibility: hidden;
+ul {
   position: absolute;
   left: -25%;
   background-color: rgb(189, 188, 188);
   width: 160px;
-  display: flex;
-  flex-direction: column;
-}
-
-a {
-  font-family: Arial, Helvetica, sans-serif;
-  color: black;
-  padding: 12px 16px;
-  text-decoration: none;
+  list-style: none;
   text-align: center;
 }
+
+li {
+  padding: 16px;
+}