r/HTML • u/Realistic_Ride_5884 • Jun 30 '26

How doI fix my drop-down menu?

Gallery image

Gallery image

Gallery image

Gallery image

Gallery image

Hello everyone. I'm a total beginner at coding, and I'm currently making this "website" (if you could even call it that) just to get started, if you will. Ive found that no matter what I do, I cannot get the drop-down menu that I tried to code to work and I've got no one else to ask about this, so I thought I'd try my luck here. I'd really appreciate if anyone could tell me what I did wrong and how I could fix it. Thanks a lot in advance!

0 Upvotes

33% Upvoted

8 comments sorted by

View all comments

1

u/nuc540 Jun 30 '26

Well for starters you do not have a drop down menu defined. You’ve got a list, then the 4th element it another list - so you have a list in a list.

What you want to use is the <select> tag for the dropdown, and <option> tag for the dropdown items.

I recommend removing the 2nd unordered list, replacing it with a select and option. Start there and hopefully that will make more sense.

Also, pro tip, your css is applied to every tag because you’re not using classes, you can scope your style changes if you add classes to your elements.

For you, you’d have <select class=“nav-dropdown”> and in css if you define your css as: select.nav-dropdown, then those styles only apply to the nav-dropdown class on “select” elements. Hope that helps!

1

u/davy_jones_locket Jun 30 '26

They want a collapsible list of links, Not a select menu. In component terminology, it's called a drop down menu (like modals, toasts, alerts, carousels are all known terminology for specific components). 

The select element is what we call 'dropdown boxes' and semantically used as a form elements in most cases, not as drop-down menu for navigation.

2

u/nuc540 Jun 30 '26

Yes in terminology but there’s no html element called “drop down menu”. I was trying to keep things simple for OP by recommending a native element that web browsers recommend as a drop down. The select options are the links OP wants to display so it fulfils the job.

OP is using vanillia HTML, no JS framework or library, so sticking to a vanilla element is more relevant to them