折叠菜单仅部分可见

时间:2017-07-17 11:32:12

标签: jquery css templates joomla

在我的网站www.dallazaira.it我的移动模板有问题。当我 点击它出现的菜单按钮,但我只看到第一个菜单项。

我在所有帖子中尝试所有css和jquery,然后尝试 修改css几个小时,但我找不到解决方案。你能帮我吗? 那? 谢谢!

The html when closed is:
<nav class=" bd-hmenu-1" data-responsive-menu="true" data-responsive-levels="">
<div class=" bd-menuitem-10 collapse-button"><a data-toggle="collapse" data-target=".bd-hmenu-1 .collapse-button + .navbar-collapse" href="#" onclick="return false;" class="collapsed"><span></span></a></div>
<div class="navbar-collapse collapse" style="height: 0px;">
<div class=" bd-horizontalmenu-1 clearfix">
<div class="bd-container-inner">
<ul class=" bd-menu-1 nav navbar-left nav-pills nav-pills">
<li class=" bd-menuitem-3 item-101 current"><a class="  active" href="/"><span>Home</span></a></li>                        
<li class=" bd-menuitem-3 item-125"><a href="/prodotti"><span>Prodotti</span></a></li>                        
<li class=" bd-menuitem-3 item-124"><a href="/gallery"><span>Gallery</span></a></li>                        
<li class=" bd-menuitem-3 item-108"><a href="/dove-siamo"><span>Dove siamo</span></a></li>                        
<li class=" bd-menuitem-3 item-109"><a href="/contattaci"><span>Contattaci</span></a></li>
</ul>    
</div>
</div>        
</div>
</nav>

打开时的html是:

<nav class=" bd-hmenu-1" data-responsive-menu="true" data-responsive-levels="">
 <div class=" bd-menuitem-10 collapse-button"><a data-toggle="collapse" data-target=".bd-hmenu-1 .collapse-button + .navbar-collapse" href="#" onclick="return false;" class=""><span></span></a></div>
  <div class="navbar-collapse collapse in" style="height: auto;">
   <div class=" bd-horizontalmenu-1 clearfix">
    <div class="bd-container-inner">
     <ul class=" bd-menu-1 nav navbar-left nav-pills nav-pills">
      <li class=" bd-menuitem-3 item-101 current"><a class="  active" href="/"><span>Home</span></a></li>
      <li class=" bd-menuitem-3 item-125"><a href="/prodotti"><span>Prodotti</span></a></li>                        
      <li class=" bd-menuitem-3 item-124"><a href="/gallery"><span>Gallery</span></a></li>                        
      <li class=" bd-menuitem-3 item-108"><a href="/dove-siamo"><span>Dove siamo</span></a></li>                        
      <li class=" bd-menuitem-3 item-109"><a href="/contattaci"><span>Contattaci</span></a></li>
     </ul>
    </div>
   </div>        
  </div>
</nav>

1 个答案:

答案 0 :(得分:0)

您应该始终检查浏览器开发人员工具中的元素。然后你会看到菜单:

  • 隐藏在您的旋转木马后面
  • 没有背景色

所以元素在那里,它只是不可见。

所以你应该添加一些css,如:

.navbar-collapse {
  z-index: 100;
  background: white;
}

但实际上你的主要教训应该是开始学习如何使用browser developer tools,这样你就可以准确地找出问题所在。