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

Question

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

此外，因为“主要链接”（例如“主页”和“关于我们”）在您将鼠标悬停在它们上方时有一个底部边框，当您继续并将鼠标悬停在下拉项目上时也会产生一点刺激，即下拉菜单向上移动 5 像素。我不知道如何解决这个问题。

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

它应该是什么样子的样机：

//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）。