Mobile menu is not working proper

style.css

@@ -23,21 +23,26 @@ p {
 }
 /* Mobile menu styles */
 #mobile-menu {
-  transition: max-height 0.3s ease-out;
-  max-height: 0;
-  overflow: hidden;
+  transition: all 0.3s ease;
+  transform: translateY(-20px);
+  opacity: 0;
+  visibility: hidden;
+  max-height: calc(100vh - 64px);
+  overflow-y: auto;
 }
 
 #mobile-menu:not(.hidden) {
-  max-height: 100vh;
-  overflow-y: auto;
+  transform: translateY(0);
+  opacity: 1;
+  visibility: visible;
 }
 
-/* Dropdown styles */
+/* Mobile dropdown styles */
 #mobile-menu [id$="-dropdown"] {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
+  padding-left: 1rem;
 }
 
 #mobile-menu [id$="-dropdown"]:not(.hidden) {
@@ -53,6 +58,31 @@ p {
 #mobile-menu-content {
   padding: 1rem;
 }
+
+/* Mobile menu links */
+#mobile-menu a {
+  display: block;
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s;
+}
+
+#mobile-menu a:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Dropdown buttons */
+#mobile-menu button[onclick^="toggleMobileDropdown"] {
+  width: 100%;
+  text-align: left;
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s;
+}
+
+#mobile-menu button[onclick^="toggleMobileDropdown"]:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 .card p:last-child {
 	margin-bottom: 0;
 }