css - Twitter Bootstrap 类下拉菜单背景太短

Question

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

菜单是下一页http://stats.feathercoin.com/上的工具菜单

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

菜单项，所以可以看到它在其余部分之外。最初的 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您必须为of设置更高的值.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/