body { margin: 0; padding: 0; } nav { display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: rgba(0, 0, 0, 0.5); color: white; z-index: 99; padding: 0 5px 0 5px; } nav button { border: 1px solid black; width: 30px; height: 30px; border-radius: 5px; background: lightgreen; cursor: pointer; } nav button:hover { background: red; } .dropdown-content { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: -200px; background-color: rgba(0, 0, 0, 0.5); padding: 20px 0px 20px 0px; height: 0px; } .dropdown-content a { margin: 10px; position: relative; top: -200px; width: auto; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; } .dropdown-content a:hover { color: red; } .dropdown-content.active { position: relative; top: 0px; transition: ease 1s; height: 200px; } .dropdown-content.active a:nth-child(1) { top: 0px; transition: 1.2s; } .dropdown-content.active a:nth-child(2) { top: 0px; transition: 1s; } .dropdown-content.active a:nth-child(3) { top: 0px; transition: 0.8s; } .dropdown-content.active a:nth-child(4) { top: 0px; transition: 0.6s; } .menu-btn-1 { height: 32px; width: 40px; cursor: pointer; } .menu-btn-1 span, .menu-btn-1 span::before, .menu-btn-1 span::after { background: red; border-radius: 3px; content: ""; position: absolute; width: 40px; height: 6px; margin-top: 13px; transition: 0.3s ease-in-out; } .menu-btn-1 span::before { margin-top: -12px; } .menu-btn-1 span::after { margin-top: 12px; } .menu-btn-1.active span { background: transparent; } .menu-btn-1.active span::before { margin-top: 0; transform: rotate(45deg); } .menu-btn-1.active span::after { margin-top: 0; transform: rotate(-45deg); } header { background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../img/bitcoin-crypto-investment.jpeg"); height: 300px; width: 100%; } .menu-btn-1 { height: 32px; width: 40px; cursor: pointer; } .menu-btn-1 span, .menu-btn-1 span::before, .menu-btn-1 span::after { background: white; border-radius: 3px; content: ""; position: absolute; width: 30px; height: 3px; margin-top: 16px; transition: 0.3s ease-in-out; } .menu-btn-1 span::before { margin-top: -12px; } .menu-btn-1 span::after { margin-top: 12px; } .menu-btn-1.active span { background: transparent; } .menu-btn-1.active span::before { margin-top: 0; transform: rotate(45deg); } .menu-btn-1.active span::after { margin-top: 0; transform: rotate(-45deg); }/*# sourceMappingURL=styles.css.map */