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

为了让您明白我的意思，我创建了JSfiddle over here。基本上，如果您查看“产品”和“与我们联系”的下拉菜单，每个列表项都足够宽以适应内容。这给下拉菜单一个'破碎'的样子。我希望所有的列表项都与列表中最宽的列表项一样宽。（要看我的意思，请看看附加的样机）。将下拉菜单列表项设置为相同宽度

另外，因为'主要链接'例如当您将鼠标悬停在它们上方时，“首页”和“关于我们”的底部边框也会在您将鼠标悬停在下拉项目上时产生一些刺激感，即下拉菜单向上移动5px。我不知道如何解决这个问题。

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

它应该是什么样子样机：

enter image description here

//Ignore this comment

2013-02-25 Tiwaz89

尝试设置

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

通过在锚设置一个无形的边界悬停会只是陈创建颜色而不是添加边框并将以下元素向下移动5px。

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

2013-02-25 09:11:10 hsan

非常感谢，我喜欢通过改变边框颜色来解决问题。效果很好。虽然你链接到的jsfiddle似乎被打破了一下？另外，我在下拉列表中的标签上显示'display：block'，似乎不起作用 – Tiwaz89 2013-02-25 09:23:23

问题中的小提琴的'a'标签上没有'display：block'。而这个小提琴破了什么？它看起来与我的完全一样（除了我的答案中提到的更改）作为链接？ – hsan 2013-02-25 09:29:11

这真的很奇怪。只需再次点击我的链接。 a标签通过.primary-link和.secondary-link CSS类显示：block。另外如果我可以给你发送你的js小提琴的截图。也许jsfiddle今天很奇怪。 – Tiwaz89 2013-02-25 09:39:51

回答