BootMetro菜单项显示太大的行空间

Question

我正在尝试使用bootmetro框架在我的标题中定义两个菜单。第一个是我的主菜单，第二个是我的用户菜单。

由于某种原因，菜单第二次显示错误，菜单项的行间距太大。

用于创建菜单的代码看起来像这样

<div class="dropdown">
    <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
        Actions
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li class="divider"></li>
        <li><a href="#">item4</a></li>
    </ul>
</div>

我遇到的问题显示在下面的屏幕截图中。在我的第二个菜单中，菜单项不能完全使用菜单。

更新

问题似乎出现在bootmetro CSS样式表中，而firebug稍微缩小了搜索范围（感谢Thanh Trung！）。在检查模式下，我可以清楚地看到a href没有填满我的第二个菜单中的菜单项（li），而它确实在我的第一个菜单中占用了最大宽度。

bootmetro CSS中的部分如下所示：

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333333;
  white-space: nowrap;
}

其他问题：这是什么'＆gt;'原因？我以前从未见过。

在两个菜单中都使用CSS类“下拉菜单”，但是，当我删除此CSS类的主体时，只有第一个菜单会相应更改。

主要问题：那么为什么我的第二个菜单项没有正确地继承这个类呢？

再次完整性第二个菜单的HTML代码（显示工件的菜单）：

<div class="dropdown pull-left">
        <a class="header-dropdown dropdown-toggle pull-right" data-toggle="dropdown" href="#">
            <b class="icon-settings"></b>
        </a>
        <ul class="dropdown-menu pull-right">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Settings</a></li>
            <li class="divider"></li>
            <li><a href="#">Log out</a></li>
        </ul>
    </div>

正确可视化的菜单

错误的可视化菜单

检查：“a”未占全宽

检查：列表项采用全宽

Answer 1

因为代码相同，但显示时有区别，这意味着css正在影响它。没有给我们css，就不可能分辨出问题所在。

以下是可能影响元素总高度的css属性：height，line-height，padding，margin。

您可以使用Firebug或Chrome检查器检查元素以查看其样式

<强>更新

bootmetro.css 2018行正在影响（覆盖）它

#top-info a {
   display: inline-block;
   height: 46px;   /**** should be removed or override *****/
   color: #5A5A5A;
}

另外我建议你使用Firebug（一个firefox的插件）来检查元素，不要使用Firefox的检查器