html dropdown not working in wordpress website

Question

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:

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

Md Habibur Rahman · Accepted Answer · 2021-05-13 17:10:37Z

1

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

answered May 13, 2021 at 17:10

Md Habibur Rahman

1873 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marks · Accepted Answer · 2021-05-13 16:41:57Z

1

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.

answered May 13, 2021 at 16:41

marks

1,39113 silver badges27 bronze badges

2 Comments

Crabzon Over a year ago

sorry bro, in website i just did that to check if its displaying, i have changed it to none again, still not working, can u check

Crabzon Over a year ago

i resized the browser window and checked, its displaying, i think its hiding behind that black section, can u please help me resolve it bro

Collectives™ on Stack Overflow

html dropdown not working in wordpress website

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related