From 2aa9a437d1ae1b9c28295c149954d9b120b2dee8 Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Tue, 9 Jan 2024 14:13:03 -0500
Subject: [PATCH] feat: styling for dropdown

---
 .../src/components/dropDown.js                  | 17 +++++++++++------
 dynamicProgrammingExamples/src/index.js         |  1 +
 dynamicProgrammingExamples/src/style.css        |  7 +++++++
 3 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 dynamicProgrammingExamples/src/style.css

diff --git a/dynamicProgrammingExamples/src/components/dropDown.js b/dynamicProgrammingExamples/src/components/dropDown.js
index 3696799..94203e4 100644
--- a/dynamicProgrammingExamples/src/components/dropDown.js
+++ b/dynamicProgrammingExamples/src/components/dropDown.js
@@ -37,10 +37,13 @@ class DropDown {
         this.dropdownItems.style.fontSize = '18px';
         this.dropdownItems.style.position = 'absolute';
         this.dropdownItems.style.top = '100px';
-        this.dropdownItems.style.background = '#E8E8E8';
+        this.dropdownItems.style.background = '#FFF';
         this.dropdownItems.style.width = '100%';
         this.dropdownItems.style.alignItems = 'center';
-        // this.dropdownItems.style.padding = '15px';
+        this.dropdownItems.style.border = '1px solid black';
+        this.dropdownItems.style.color = 'black';
+        this.dropdownItems.style.boxSizing = 'border-box';
+
 
         this.menu.forEach(e => {
             const a = document.createElement('a');
@@ -48,14 +51,16 @@ class DropDown {
             a.textContent = e;
             a.style.textDecoration = 'none';
             a.style.display = 'inline-block';
-            a.style.width = '100%';
+            a.style.width = 'calc(100% - 10px)';
             a.style.textAlign = 'center';
             a.style.padding = '5px';
             
 
-            // a.addEventListener('mouseover', () => {
-            //     a.style.background = '#E8E8E8'
-            // })
+            a.addEventListener('mouseover', () => {
+                a.style.background = '#E8E8E8';
+                // a.style.background = 'black'
+            });
+            a.addEventListener('mouseleave', () => a.style.background = '#FFF');
             this.dropdownItems.appendChild(a)
         })
     }
diff --git a/dynamicProgrammingExamples/src/index.js b/dynamicProgrammingExamples/src/index.js
index 8dd8c9b..aaaa11d 100644
--- a/dynamicProgrammingExamples/src/index.js
+++ b/dynamicProgrammingExamples/src/index.js
@@ -1,4 +1,5 @@
 import { DropDown } from "./components/dropDown";
+import './style.css';
 
 const dropdown = new DropDown(['main', 'about', 'store', 'blog']);
 
diff --git a/dynamicProgrammingExamples/src/style.css b/dynamicProgrammingExamples/src/style.css
new file mode 100644
index 0000000..dccdbb8
--- /dev/null
+++ b/dynamicProgrammingExamples/src/style.css
@@ -0,0 +1,7 @@
+a {
+    color: black;
+}
+
+a:hover {
+    color: black;
+}