I'm confused on how to handle dropdown menus

HTML-CSS
1

The dropdown menu is coming close to being finished, but I cannot figure out how to put the links into the dropdown menu. Every time I try to copy other examples of dropdown menus, but they all look different in their HTML layout, and they all cause me to lose 4 extra tests, rather than pass the 12th one.

3

I was a little hasty in my previous reply. You really did mean dropdown menu

For your dropdown you will need some css to style that ul to look like a column of buttons, position them relative to your “Dropdown” button and to then hide your menu until you click (or hover maybe) over that button.

You’ll also need some javascript to show that menu when you click the button and disappear it again when you select from the menu.

Your time would be well spent reading a short article or tutorial on drop down menus.

I did throw together a quick and dirty example in a fork of your codepen

4

I tried using the javascript that you showed me and followed the tutorial for hoverable dropdown menus on w3Schools, and for some reason, the box of the dropdown menu’s content will disappear as soon as the mouse is away from it. I try to hover the mouse over the content to click it, but it’s like there’s a gap in between the button and the menu content.

I will continue to work on it.

5

I got the menu to finally work like how I want it following your advice and some instructions from w3schools, but now some other tests are broken.

I will continue to experiment.

6

You now have a malformed opening form tag and there is an improperly nested div that wraps only the opening form tag. Both have been added to your code since the original post. Fix those and you’ll be back to passing 12 / 17

Looking over the test cases I’m thinking you might want to look closely at the example pen for this project. The “dropdown menu” that you are making is different from the <select> element required by the user stories. If that is the case you haven’t really lost anything - everyone needs to learn how to make a dropdown menu at some point.

7

I think I see it, but kind of not really? I don’t know if I’m dyslexic in some way or something, but I think I see what you are talking about and am going to try and remedy it.

8

Click the “tidy html” in the upper right of html editor. That will nest your code better so you can see the situation more clearly.

You have a weird nesting situation like below

<div>
        <form someweirdtexthere>
</div>



        </form>

Actual code

  <div><!-- opening div -->
    <form id="survey-form" Survey-Holder>  <!-- what's that Survey-Holder doing there? -->

      <!-- Dropdown menu test begin -->

      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <ul class="dropdown-content">

          <li><a href="#name">Name</a></li>

          <li><a href="#email">E-Mail</a></li>

          <li><a href="#number">Number</a></li>
        </ul>
      </div>
  </div><!-- closing div -->
9

OK, I fixed it. Moving on.

11

OK now I’m hung up on user story 13. It wants me to create at least two radio buttons but have them all under the same value. I will continue to work on it.