Why isn't my dropdown menu appearing correctly?

Question

Why isn't my dropdown menu appearing correctly?

After trying numerous approaches, I am still struggling to create a drop-down menu from an image. The cursor does change to a pointer, but something is clearly not right.

Here are the HTML and CSS snippets I am currently working with:

<a>

  <img class="dropbtn" id="profile" src="img/icons/Profiel.png" alt="Profiel" width="50px" heigt="50px">

    <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </img>
</a>

/* Dropdown Button */
.dropbtn {
    cursor: pointer;
    background-color: none;
}


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

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

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

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

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

html css drop-down-menu dropdown

Answer 1

Answer №1

Refer to the code snippet below

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("show");
});

.dropbtn {
    cursor: pointer;
    background-color: none;
}


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

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

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
a:hover .dropdown-content {display:block}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>

  <img class="dropbtn" id="profile" src="img/icons/Profiel.png" alt="Profiel" width="50px" heigt="50px">

    <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
 
</a>

Answer 2

Refer to the code snippet below

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("show");
});

.dropbtn {
    cursor: pointer;
    background-color: none;
}


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

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

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
a:hover .dropdown-content {display:block}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>

  <img class="dropbtn" id="profile" src="img/icons/Profiel.png" alt="Profiel" width="50px" heigt="50px">

    <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
 
</a>

Answer 3

Answer №2

Would you be interested in utilizing jQuery for this task?

To achieve your desired outcome, all you need to do is add the following code:

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("open");
});

Take a look at the Codepen Demo here

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("open");
});

/* Dropdown Button */

.dropbtn {
  cursor: pointer;
  background-color: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content.open {
  display: block;
}

/* Links inside the dropdown */

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


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a>
  <img class="dropbtn" id="profile" src="http://placehold.it/350x350" alt="Profiel" width="50px" height="50px">

  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </img>
</a>

Answer 4

Would you be interested in utilizing jQuery for this task?

To achieve your desired outcome, all you need to do is add the following code:

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("open");
});

Take a look at the Codepen Demo here

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("open");
});

/* Dropdown Button */

.dropbtn {
  cursor: pointer;
  background-color: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content.open {
  display: block;
}

/* Links inside the dropdown */

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


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a>
  <img class="dropbtn" id="profile" src="http://placehold.it/350x350" alt="Profiel" width="50px" height="50px">

  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </img>
</a>

Answer 5

Answer №3

Did you remember to change the dropdowns CSS to display: block; when the image is clicked?

If not, give this a try with (JavaScript):

var trigger = document.getElementById("profile"),
    dropdown = document.getelementById("myDropdown");

trigger.onclick = function(){ // click on the image
    dropdown.classList.toggle("active"); // toggle the display of dropdown
});

CSS:

or use jQuery (if it's included in your website):

$("#profile").click(function(){ // click on the image
    $("#myDropdown").toggleClass("active"); // toggle the display of dropdown
});

Ensure (if you are unfamiliar) to add the above code within a script tag in your <head> or <body> tags in your HTML document!

#myDropdown.active{ /* if #myDropdown has class "active" */
    display: block; /* show the dropdown */
}

Hopefully, this provides some assistance! :-)

Answer 6

Did you remember to change the dropdowns CSS to display: block; when the image is clicked?

If not, give this a try with (JavaScript):

var trigger = document.getElementById("profile"),
    dropdown = document.getelementById("myDropdown");

trigger.onclick = function(){ // click on the image
    dropdown.classList.toggle("active"); // toggle the display of dropdown
});

CSS:

or use jQuery (if it's included in your website):

$("#profile").click(function(){ // click on the image
    $("#myDropdown").toggleClass("active"); // toggle the display of dropdown
});

Ensure (if you are unfamiliar) to add the above code within a script tag in your <head> or <body> tags in your HTML document!

#myDropdown.active{ /* if #myDropdown has class "active" */
    display: block; /* show the dropdown */
}

Hopefully, this provides some assistance! :-)

Why isn't my dropdown menu appearing correctly?

Answer №1

Answer №2

Answer №3

Similar questions

Mastering the intricacies of Angular bindings through intuition

The behavior of Django Admin is rather peculiar

Can you affix a tag to the picture?

How to Change Background Color to Black for a PNG Image Using CSS in Ionic

What are some more efficient methods for implementing page location detection with Angular directives?

Click to Rotate Angular Chevron

What could be causing jQuery.css() to not function properly?

Integrating CSS into dynamically generated table rows using jQuery

Is it possible to create HTML code that remains unaffected by alterations in CSS class names?

"Encountering a glitch with masterpage.cs in Aspx.net and C#

Creating a CSS class dynamically with AngularJS: A step-by-step guide

Can a circular design incorporating an arrow and gradient background be created?

JQuery modal for creating vibrant and personalized color schemes

I am currently working on integrating a Netlify form into a contact form using React.js

Quick way to include id="" and class="" attributes to HTML elements using Sublime Text 2

Heading made of ribbon without increasing the scrolling space

How can I align content to the left within a div that is right-aligned?

A space designated for numerous receivers

Changing the alignment of divs to center instead of the right side

chosen=chosen based on data from mysql database