Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

Well-Known 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 🙂


[CODE lang="html" title="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>
[/CODE]
[CODE lang="css" title="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;
}[/CODE]
 

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 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...
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:

[CODE lang="html" title="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>[/CODE]

[CODE lang="css" title="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;
}[/CODE]
 
Last edited:
Solution
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.
 
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:
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom