将下拉菜单列表项设置为相同的宽度

Question

为了让你理解我的意思我已经创建了一个JSfiddle over here。基本上，如果您查看“产品”和“联系我们”的下拉菜单，每个列表项都足够宽，以适应内容。这使下拉菜单看起来“破碎”。我希望所有列表项都与列表中最宽的列表项一样宽。 （看看我的意思，请看一下附加的模型）。

另外因为'primay links'例如当你将鼠标悬停在它们上面时，“Home”和“关于我们”有一个底部边界，当你继续并将鼠标悬停在下拉项目上时，它也会产生一点刺激，即下拉菜单向上移动5px。我不知道如何解决这个问题。

非常重要：我不想为列表项设置静态宽度！

应该是什么样子的样机：

//Ignore this comment

Answer 1

尝试设置

li a {
    border-bottom: 5px solid rgba(255,255,255, 0);
}
.secondary-list li {
    float: none;
}

jsFiddle

通过在锚点上设置不可见的边框，悬停只会更改颜色，而不是添加边框并将以下元素向下移动5px。

删除第二级li元素的浮动使它们使用列表的整个宽度（=最宽li的宽度）。