折叠菜单仅部分可见答案

【问题标题】：Collapsed Menu only partially visible折叠菜单仅部分可见
【发布时间】：2017-07-17 11:32:11
【问题描述】：

在我的网站 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>

【问题讨论】：

你的代码在哪里，你试过什么？对于一个特定的问题，你会得到更好的回答，目前这个问题太开放了。
我将链接发布到该站点，以便您检查页面，我认为更简单。我添加了html。该模板是一个免费的 joomla 模板。如果你需要一些东西告诉我。谢谢
我发布了一个解决方案。但这对于堆栈溢出来说是个坏问题。由于您的问题并未完全反映问题。它只能通过实际查看您的页面来解决。所以我会投票删除它。下次请创建一个最小的、可验证的示例，请参阅：stackoverflow.com/help/mcve 如果您想帮助其他人，您确实应该将问题报告给模板制作者，除非问题只是通过您的自定义 CSS 创建的。
感谢您的解决方案。但在这种情况下，菜单会越过轮播。问题是在移动设备上打开菜单时，内容不会像其他响应式菜单一样下推。模板制作者不回复任何邮件。我喜欢堆栈溢出，但我认为它对所有用户来说都更简单。如果为了可验证我必须在这个网站上复制 html、css、jquery 等，我会浪费很多时间来寻找解决方案或打电话给朋友，这是我的想法。我更喜欢亲自检查问题，它更简单。您可以删除帖子并再次感谢您的回答、您的时间和您的帮助。

标签： jquery css templates joomla

【解决方案1】：

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

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

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

所以你应该添加一些css，比如：

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

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

【讨论】：