added dropdown to navbar.

Website/index.html

@@ -38,6 +38,21 @@
             <ul class="nav-links">
                 <li><a href="/">Home</a></li>
                 <li><a href="/about">About</a></li>
+
+
+
+                <!-- Dropdown on navbar -->
+                <li class="dropdown">
+                    <button id="dropdownButton" class="dropbtn">Organization</button>
+                    <div id="dropdownMenu" class="dropdown-content">
+                        <a href="/how-we-work">How we work?</a>
+                        <a href="/projects">Projects</a>
+                        <a href="/team">Team</a>
+                        <a href="/code-of-conduct">Code of Conduct</a>
+                    </div>
+                </li>
+
+
                 <li><a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">Learn</a></li>
                 <li><a href="/organization">Organization</a></li>
                 <li><a href="/faq">FAQ</a></li>

Website/js/script.js

@@ -176,6 +176,20 @@ async function fetchSubdirectoryCounts() {
         });
     }
 
+    const dropdownButton = document.getElementById('dropdownButton');
+    const dropdownMenu = document.getElementById('dropdownMenu');
+
+    dropdownButton.addEventListener('click', function(event) {
+        dropdownMenu.classList.toggle('show');
+        event.stopPropagation(); // Prevent click event from bubbling up
+    });
+
+    window.addEventListener('click', function(event) {
+        if (!dropdownButton.contains(event.target)) {
+            dropdownMenu.classList.remove('show');
+        }
+    });
+
     const chatbotButton = document.getElementById('chatbot-button');
     const chatbot = document.getElementById('chatbot');
     const closeChatbot = document.getElementById('close-chatbot');

Website/styles.css

@@ -185,6 +185,49 @@ header {
     text-decoration: underline;
 }
 
+.dropdown {
+    float: left;
+    overflow: hidden;
+}
+
+.dropbtn {
+    font-size: 16px;
+    border: none;
+    outline: none;
+    color: white;
+    padding: 14px 16px;
+    background-color: inherit;
+    font-family: inherit;
+    margin: 0;
+    cursor: pointer;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+/* Show dropdown on hover */
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.show {
+    display: block;
+}
+
 main {
     padding: 20px;
     flex: 1;