CSS下拉菜單中的調整寬度

Question

我僅使用CSS制作了一個下拉菜單，但我做起來並不容易。 到目前為止，我有一個實際的下拉列表，但是寬度是父元素的寬度，對於某些項目而言，它太小了，無法在一行中顯示。

菜單寬度太短

我嘗試設置一個手動寬度，但這只是使整個內容無法對齊，並且不實用，因為菜單項可能會更長。 無論如何，在不更改父級寬度的情況下，其寬度可以適應內容嗎？

所有站點文件都位於這里： http : //dev.cuonic.com/bourree/

任何幫助表示贊賞，謝謝:)

Answer 1

在firefox / firebug中玩耍時，我發現這種組合似乎產生了預期的效果：

#menu ul ul li {
    display: block;
    float: left;
    left: -34px;
    position: relative;
    width: 200px;
}

在此處輸入圖片說明

Answer 2

這是一個不為下拉菜單使用固定寬度的解決方案。

首先，將以下內容添加到下拉列表中的鏈接的CSS：

#menu ul ul li a {
    white-space: nowrap;
}

我還必須將#menu ul和#menu ul li更改為#menu > ul和#menu > ul > li ，以便這些CSS樣式僅適用於第一級菜單項。

這是有關在CSS選擇器中使用>的基本參考。 我認為此示例中還有其他方面可以幫助您：