【问题标题】:html dropdown not working in wordpress websitehtml下拉菜单在wordpress网站中不起作用
【发布时间】:2021-05-13 16:24:36
【问题描述】:

我在 wordpress 中有一个网站,thenter link description here

网站页脚中有一个部分,如下图所示:

我想让这个部分成为下拉列表,所以我在这个部分添加了以下更改:

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

当我在网站之外的一个简单页面中进行部分时,它工作正常,但是当添加到网站时,下拉功能不起作用,谁能帮忙,比提前

【问题讨论】:

    标签: php html css wordpress dropdown


    【解决方案1】:

    .vc_section 类被溢出隐藏。这就是为什么您的下拉菜单没有显示的原因。如果您修复了此类,那么您的问题将得到解决。

    【讨论】:

      【解决方案2】:

      网站上的样式与您在此处发布的样式不同。 .dropdownme-content 的定义是

      .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;
      }
      

      所以它已经默认设置为display: block。在这里,您发布的是display: none !important。删除 display: block 时,悬停对我有用。

      另外,减少important 的使用。好的 CSS 不应该真的需要它,它有一天会给你带来很多问题,或者它实际上可能是它已经失败的原因。

      【讨论】:

      • 对不起兄弟,我只是在网站上这样做是为了检查它是否显示,我再次将其更改为无,仍然无法正常工作,你可以检查一下
      • 我调整了浏览器窗口的大小并检查了它的显示,我认为它隐藏在那个黑色部分之后,你能帮我解决它吗兄弟
      猜你喜欢
      • 1970-01-01
      • 2021-12-31
      • 2018-05-12
      • 1970-01-01
      • 2019-07-28
      • 2016-03-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多