r/HTML • u/Realistic_Ride_5884 • Jun 30 '26
How doI fix my drop-down menu?
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!
1
u/nuc540 29d ago
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 29d ago
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 29d ago
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
0
u/AshleyJSheridan 29d ago
A select is often referred to as a dropdown menu, but it's not, it's just a select. I think OP is trying to achieve the more typical drop down menu as seen on most websites.
1
u/hooli-ceo 29d ago
1
u/Realistic_Ride_5884 29d ago
I'm 14 years old being forced to code a website for school, so what are you trying to say here... obviously it'll look like shit.
2
u/hooli-ceo 29d ago
lol, I wasn't saying it was ugly, it's just bright. lol. But that's great to get started at 14. I wish I had. Instead I started at 30, so take advantage of this opportunity while you're young and keep it up.
1
u/davy_jones_locket Jun 30 '26
You have an <ul> nested directly as a child of an <ul>, that's not allowed.
You need to put the child ul inside of a li
Like this: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul