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; +}