diff --git a/animation/02-drop-down/index.html b/animation/02-drop-down/index.html
index ac776df..e50c3cc 100644
--- a/animation/02-drop-down/index.html
+++ b/animation/02-drop-down/index.html
@@ -10,8 +10,8 @@
   <body>
     <div class="dropdown-container">
       <div class="dropdown-menu">
-        <button class="dropdown-button">Dropdown</button>
-        <ul class="dropdown-content">
+        <button>Dropdown</button>
+        <ul>
           <li>Item 1</a>
           <li>Item 2</a>
           <li>Item 3</a>
diff --git a/animation/02-drop-down/solution/solution.css b/animation/02-drop-down/solution/solution.css
index 447d4d2..70a5be5 100644
--- a/animation/02-drop-down/solution/solution.css
+++ b/animation/02-drop-down/solution/solution.css
@@ -16,7 +16,7 @@
   position: relative;
 }
 
-.dropdown-button {
+button {
   background-color: rgb(108, 238, 255);
   padding: 16px;
   font-size: 16px;
@@ -30,26 +30,36 @@ ul {
   width: 160px;
   list-style: none;
   text-align: center;
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.25s ease-out;
 }
 
 li {
   padding: 16px;
 }
 
+/* SOLUTION */
+
+/* disclaimer: duplicating the `ul` element here isn't best practice.
+In your solution you probably put it right inside the existing `ul`,
+which _is_ the best practice. 
+We separated it out here to make it extra clear what has changed. */
+
+ul {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.25s ease-out;
+}
+
 .dropdown-menu:hover ul {
   max-height: 500px;
   transition: max-height 0.5s ease-out;
 }
 
-.dropdown-menu:hover .dropdown-button {
+button:hover {
   cursor: pointer;
   background-color: rgb(59, 232, 255);
 }
 
-.dropdown-content li:hover {
+ul 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 3ef4ae0..84088a1 100644
--- a/animation/02-drop-down/solution/solution.html
+++ b/animation/02-drop-down/solution/solution.html
@@ -10,8 +10,8 @@
   <body>
     <div class="dropdown-container">
       <div class="dropdown-menu">
-        <button class="dropdown-button">Dropdown</button>
-        <ul class="dropdown-content">
+        <button>Dropdown</button>
+        <ul>
           <li>Item 1</a>
           <li>Item 2</a>
           <li>Item 3</a>
diff --git a/animation/02-drop-down/style.css b/animation/02-drop-down/style.css
index 5737e96..4bcb1e8 100644
--- a/animation/02-drop-down/style.css
+++ b/animation/02-drop-down/style.css
@@ -16,7 +16,7 @@
   position: relative;
 }
 
-.dropdown-button {
+button {
   background-color: rgb(108, 238, 255);
   padding: 16px;
   font-size: 16px;
