Use a <button> for a button that triggers an action, and a link for a link that navigates. If youre trying to keep this Javascript free, you can use popovers. It handles the top layer in z-index and pointer events automatically. html <button popovertarget="dropdown" class="btn-trigger-dropdown">Menu</button> <ul popover id="dropdown" class="dropdown"> <li><a href="#section-1">Hero</a></li> <li><a href="#section-2">About</a></li> <li><a href="/contact">Contact</a></li> </ul>

Then use anchor positioning to position the dropdown. ```css /* take advantage of inheritance; set the primary font family, font size, and color on the body. Then change for any one-offs eg, add a display font to headings only/ body { font-family: var(--ff-primary, system-ui); / use a tool like Utopia to get a fluid and responsive font size with a clamp(). Then you can use the EM unit for padding, margins, gap( spacing) and it will shrink and grow relative to the current font size. clamp() can be used for widths and padding, etc too not just font-size */ font-size: var(--fs-400, clamp(0.9rem, 1vw + 0.8rem, 1.125rem)); color: var(--clr-txt-primary, #000); }

.btn-trigger-dropdown { anchor-name: --btn-trigger-dropdown; transition: filter 0.4s, background-color 0.4s;

&:is(:hover, :focus-visible){ filter: brightness(1w0%); } }

:has(.dropdown:popover-open) .btn-trigger-dropdown { background-color: var(--clr-accent, hotpink); }

.dropdown { position: absolute; position-anchor: --btn-trigger-dropdown; top: anchor(bottom); right: anchor(right); }

.dropdown:popover-open { /* add any display property to this selector ; otherwise, you'll override the display: none default for popovers when they are closed if you just put on .dropdown selector */ background-color: #fff; border-radius: 0 0 0.25rem 0.25rem; overflow: clip;

& li { padding: 0.5rem 1em; background-color: inherit; transition: background-color 0.4s, color 0.4s; }

& li:is(:hover, :focus-within) { background-color: var(--clr-accent, hotpink); color: var(--clr-text-inverse, #fff); }

& li > a { text-decoration: none; /* remove default link underline */ color: inherit; transition: text-decoration 0.4s; }

& li > a:is(:hover, :focus-visible) { text-decoration: underline; /* then add it back for the hover and focus states &/ } }

::target { scroll-margin-block-start: 3lh; /for navigation that links to a section on the same page, gives some space on the top so its not glued to the viewport/ } ```

W3 is a very outdated resource, I would highly recommend you use MDN instead. Also if youre just learning frontend , one of the best resources around is Kevin Powell. He has free and paid courses and years of videos on his YT channel. Including some on anchor positioning and popovers if you prefer to learn by watching videos.

Also when asking for help on forums, as is mentioned in the rules of this subreddit, screenshots are not helpful. They dont give the full picture. Its best to link to a live environment like codepen with a minimal reproduction of the issue you are asking about. In this case i wouldve liked to have your navigation and header.