Question

我一直在努力想出办法。我们的网站上有一个下拉菜单，其中包含五个元素和一个轻微的渐变填充背景。我需要添加第六个元素，但它显示在下拉菜单背面下方。所以它在渐变填充背景之外。

菜单是下一页http://stats.feathercoin.com/

上的工具菜单

如果您使用inspect元素并添加另一个

菜单项，那么可以看到它在其余部分之外。原始的Web开发人员已经离开了，我无法想出这个。代码看起来很简单，所以我相信这是一个我无法解开的自定义。

<ul class="dropdown-menu">
    <li><a href="//www.feathercoin.com/buttongen">Button Generator</a></li>
    <li><a href="//www.feathercoin.com/calc">Calculator</a></li>
    <li><a href="//www.feathercoin.com/charts">Charts</a></li>
    <li><a href="//explorer.feathercoin.com/">Explorer</a></li>
    <li><a href="//local.feathercoin.com/">Local Feathercoin</a></li>
    <li><a href="//www.feathercoin.com/netstats/">Stats</a></li>
</ul>

我希望这是有道理的。任何帮助表示赞赏。

Answer 1

您必须为max-height

的.navbar .nav>li>a:hover ~ .dropdown-menu, .navbar .dropdown-menu:hover设置更高的值

像：

.navbar .nav>li>a:hover ~ .dropdown-menu, .navbar .dropdown-menu:hover {
  display: block;
  padding: 5px 0;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.2);
  border-top: 0;
  max-height: 500px;
  -moz-transition: max-height .5s, padding 0.2s;
  -webkit-transition: max-height .5s, padding 0.2s;
  -o-transition: max-height .5s, padding 0.2s;
  transition: max-height .5s, padding 0.2s;
}

演示：http://jsfiddle.net/AU3rr/

Twitter Bootstrap类下拉菜单背景太短

1 个答案: