Nothing much

Davy's/index.html

@@ -21,11 +21,10 @@
         <div class="right">
             <input type="text" id="searchBar" placeholder="Search at Davy's">
             <button id="userBtn" class="right topBarBtn">User</button>
+            <div id="listContainer"></div>
         </div>
     </div>
-    <div id="headLine">
-        <h>Head</h>
-    </div>
+    <h1>Head</h1>
 
 </body>
 

Davy's/script.js

@@ -0,0 +1,31 @@
+'use strict';
+
+let button = document.getElementById('userBtn');
+let listContainer = document.getElementById('listContainer');
+
+button.addEventListener('mouseover', function () {
+    // Clear the list container first
+    listContainer.innerHTML = '';
+
+    // Let's create a list of anchors
+    let list = document.createElement('ul');
+
+    for (let i = 0; i < 5; i++) {
+        let listItem = document.createElement('li');
+        let anchor = document.createElement('a');
+
+        // Let's set some dummy href for the anchors
+        anchor.href = "#";
+        anchor.textContent = "Link " + (i + 1);
+
+        listItem.appendChild(anchor);
+        list.appendChild(listItem);
+    }
+
+    listContainer.appendChild(list);
+});
+
+// Optionally, you can hide the list when the mouse leaves the button
+button.addEventListener('mouseout', function () {
+    listContainer.innerHTML = '';
+});

Davy's/style.css

@@ -33,8 +33,6 @@ body {
     /* background-image: linear-gradient(to left, #4c345c 0%, #56578a 100%); */
 }
 
-#headLine {}
-
 .topBarBtn {
     margin-left: 11px;
     margin-top: 10px;
@@ -46,7 +44,7 @@ body {
 
 }
 
-h {
+h1 {
     text-align: center;
-    color: rgba(45, 181, 181, 0.467);
+    color: #c10917;
 }