create a drop down with options:

components/dropdown.js

@@ -0,0 +1,91 @@
+class CustomDropdown extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .dropdown {
+          position: relative;
+          display: inline-block;
+        }
+        .dropdown-btn {
+          background: none;
+          border: none;
+          cursor: pointer;
+          color: #374151;
+          font-weight: 500;
+          transition: color 0.2s;
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+        }
+        .dropdown-btn:hover {
+          color: #13aa52;
+        }
+        .dropdown-content {
+          position: absolute;
+          background-color: white;
+          min-width: 160px;
+          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
+          border-radius: 0.5rem;
+          z-index: 1;
+          opacity: 0;
+          visibility: hidden;
+          transform: translateY(10px);
+          transition: all 0.2s ease;
+        }
+        .dropdown-content.show {
+          opacity: 1;
+          visibility: visible;
+          transform: translateY(0);
+        }
+        .dropdown-content a {
+          color: #374151;
+          padding: 0.75rem 1rem;
+          text-decoration: none;
+          display: block;
+          transition: background-color 0.2s;
+          font-size: 0.875rem;
+        }
+        .dropdown-content a:hover {
+          background-color: #f3f4f6;
+          color: #13aa52;
+        }
+        .icon {
+          transition: transform 0.2s;
+        }
+        .dropdown.active .icon {
+          transform: rotate(180deg);
+        }
+      </style>
+      <div class="dropdown">
+        <button class="dropdown-btn">
+          <span>${this.getAttribute('title') || 'Menu'}</span>
+          <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </button>
+        <div class="dropdown-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+
+    const dropdownBtn = this.shadowRoot.querySelector('.dropdown-btn');
+    const dropdownContent = this.shadowRoot.querySelector('.dropdown-content');
+    const dropdown = this.shadowRoot.querySelector('.dropdown');
+
+    dropdownBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      dropdownContent.classList.toggle('show');
+      dropdown.classList.toggle('active');
+    });
+
+    // Close when clicking outside
+    document.addEventListener('click', () => {
+      dropdownContent.classList.remove('show');
+      dropdown.classList.remove('active');
+    });
+  }
+}
+
+customElements.define('custom-dropdown', CustomDropdown);

components/navbar.js

@@ -35,13 +35,22 @@ class CustomNavbar extends HTMLElement {
                     
                     <div class="nav-links flex items-center space-x-6">
                         <a href="/" class="text-gray-700 hover:text-green-600 transition-colors font-medium">Home</a>
-                        <a href="#" class="text-gray-700 hover:text-green-600 transition-colors font-medium">Courses</a>
-                        <a href="#" class="text-gray-700 hover:text-green-600 transition-colors font-medium">Resources</a>
+                        <custom-dropdown title="Courses">
+                            <a href="#foundational">Foundational</a>
+                            <a href="#developer">Developer</a>
+                            <a href="#admin">Admin/DevOps</a>
+                            <a href="#ai">AI Developer</a>
+                        </custom-dropdown>
+                        <custom-dropdown title="Resources">
+                            <a href="#">Documentation</a>
+                            <a href="#">Tutorials</a>
+                            <a href="#">Community</a>
+                            <a href="#">Blog</a>
+                        </custom-dropdown>
                         <a href="#" class="text-gray-700 hover:text-green-600 transition-colors font-medium">About</a>
                         <a href="#" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md font-medium transition-colors">Sign In</a>
                     </div>
-                    
-                    <button class="mobile-menu hidden text-gray-700">
+<button class="mobile-menu hidden text-gray-700">
                         <i data-feather="menu"></i>
                     </button>
                 </div>

index.html

@@ -16,10 +16,11 @@
     <script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
     <script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
     <script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
-<script src="components/navbar.js"></script>
+    <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/course-card.js"></script>
     <script src="components/calendar.js"></script>
+    <script src="components/dropdown.js"></script>
 </head>
 <body class="bg-gray-50">
     <custom-navbar></custom-navbar>
@@ -52,6 +53,7 @@
                     <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                         <h4 class="font-medium text-green-600">MDB100</h4>
                         <p class="text-gray-600">MongoDB Database and Security</p>
+                        
                     </div>
                     <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                         <h4 class="font-medium text-green-600">MDB200</h4>