• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Drop down menu not working

Maja0802

New Coder
My list with dropdown items (called link1, link2 and link3 just for the example) are not showing, when I hover over the button (called dropdown). Any ideas what might have gone wrong. I cannot seem to find the mistake on my own

Thanks in advance :)


Drop down menu HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Drop down menu</title>
  <link rel="stylesheet" href="dropdown.css">
</head>

  <body>
    <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class= "dropdown-content">
        <a href="link 1"></a>
        <a href="link 2"></a>
        <a href="link 2"></a>
      </div>
    </div>

  </body>
</html>
Drop down menu stylesheet:
/*dropdown button */
.dropbtn {
  background-color: #4CAF50;
  color:white;
  padding:16px;
  font-size:16px;
  border:none;
}

/* The container >div> - needs to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/*Dropdown Content (Hidden by default)*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow; 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding; 12px 16 px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover{
background-color: #ddd;
}

/*show the dropdown menu on hover*/
.dropdown:hover .dropdown-content {
  display:block;
}
/*Change the background color of the dropdown button when the dropdown content is shown*/
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
 

Attachments

  • Skærmbillede 2020-09-27 kl. 08.45.29.png
    Skærmbillede 2020-09-27 kl. 08.45.29.png
    118.6 KB · Views: 3
Solution
Hi @Maja0802 ,

You accidentally put some semicolons for your box-shadow (for .dropdown-content) and padding (for .dropdown-content a) - this caused your code not to work. Use regular colons right after the CSS...

Mace

New Coder
Hi @Maja0802 ,

You accidentally put some semicolons for your box-shadow (for .dropdown-content) and padding (for .dropdown-content a) - this caused your code not to work. Use regular colons right after the CSS property instead. You also put a space between '16' and 'px' in .dropdown-content a, which won't work either (the padding won't be applied). You can simply remove the space to fix that.

In the HTML, you did not put any text for the links (the text was put for the 'href'), so the links would not show up, simply because there was no text (you should but the link text between <a href="#"> and </a>).

If you fix the above, you'll get the following result:


Screen Shot 2020-09-27 at 10.02.56 AM.png

Here's the code:

HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Drop down menu</title>
  <link rel="stylesheet" href="dropdown.css">
</head>

  <body>
    <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class= "dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

  </body>
</html>

CSS:
/* dropdown button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container >div> - needs to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16 px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover{
background-color: #ddd;
}

/* show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
 
Last edited:
Solution

Malcolm

Administrator
Administrator
Verified
Hi there,

I have changed this thread to a question thread so you are able to Mark a post as a solution, could you take a minute and mark the post as a solution.
 

Malcolm

Administrator
Administrator
Verified
Hey Malcolm... I am afraid you have to help me out here again. How exactly do I mark the post as a solution?
:)
Hi! I apologize for the delay in response to this thread, I just moved across the province. To mark a post as a solution, you have to click the checkmark on the right of the post.

As seen in the photo below:
 
Top Bottom