Question 166132 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Why isn’t the HTML dropdown working on my WordPress website?

i have a website in wordpress, thenter link description here

there is a section in the footer of the websiite like in the below image:

enter image description here

i want to make this section a dropdown , so i added the following changes to this section:

        .dropdownme {
  position: relative !important;
  display: inline-block !important;
}

.dropdownme-content {
  display: none !important;
  position: absolute !important;
  background-color: #f1f1f1 !important;
  min-width: 160px !important;
    height:500px !important;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important;
  z-index: 9999999 !important;
}

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

.dropdownme-content a:hover {background-color: #ddd !important;}

.dropdownme:hover .dropdownme-content {display: block !important;}

.dropdownme:hover .dropbtnme {background-color: #3e8e41 !important;}
<div class="ltx-footer-social" id="naari" style="margin-top:10%; ">
<div class="container">
<div class="row ">


<div class="col-lg-3 col-md-6 col-sm-6 dropdownme">
<div class="col-lg-3 col-md-6 col-sm-6 dropdownme">
<a href="#" target="_blank" class="item dropbtnme" data-mh="ltx-social-footer" style="height: 98px;">
<span class="icon fa fa-map-marker"></span>
<span class="header">Wanna Reach Us?</span></div>
 <div class="dropdownme-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</div>
</div>
</div>

when i did the section outside of the website, in aplain page, its working fine, but when added to the website the dropdown function not working, can anyone please help, thans in advance

Tags:

2

Answers


  1. 0

    The style on the website is not the same as you posted here. The .dropdownme-content definition is

    .dropdownme-content {
    display: block !important;
    position: absolute !important;
    background-color: #f1f1f1 !important;
    min-width: 160px !important;
    height: 500px !important;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%) !important;
    z-index: 9999999 !important;
}

    So it’s set to display: block already by default. Here, you posted that it is display: none !important. When removing the display: block the hover works for me.

    Also, reduce the use of important. Good css shouldn’t really need that and it will cause you a lot of problems one day or it might actually be the reason it’s failing already.

    Login or Signup to reply.
  2. 0

    enter image description here

    .vc_section Class are overflow hidden. That’s why your Dropdown not showing.If you fixed this class then your problem will be solve.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search