將下拉菜單列表項設置爲相同寬度

爲了讓您明白我的意思，我創建了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

回答