你如何創建一個右對齊的suckerfish菜單，其中頂部鏈接是可變寬度的？

Question

我創建了一個 Suckerfish 之子 (http://htmldog.com/articles/suckerfish/dropdowns/) 基於 CSS 的導航菜單。 左側是普通的 Suckerfish，其中頂級導航條目與下拉菜單的寬度相同。

在我的菜單的右側，我有幾個小圖標，用於顯示幫助和選項等內容，這些圖標也有下拉菜單。 問題是我需要將它們右對齊，這樣它們就不會離開頁面 go，因為圖標很窄並且向右浮動。

文字圖片時間：）

_______________________________________________________
| menu-item    | menu-item    |       ____________| ? |
--------------------------------------| help item 1   |
                                      | help item 2   |
                                      | etc           |
                                      -----------------

我做的比較成功的是對包含下拉條目的內部應用負左邊距：

#nav li ul { width: 10em; margin-left: -10em; }

有一個問題，它最終離得太遠了：

_______________________________________________________
| menu-item    | menu-item    |  _________________| ? |
---------------------------------| help item 1   |-----
                                 | help item 2   |
                                 | etc           |
                                 -----------------

一個簡單的解決方案是將我的寬度基於 px 而不是 em 並將負左邊距減少我的圖標的寬度（16px），但這很hacky。 它不會處理字體縮放。 我想到的另一個技巧是使用 margin-left:-9em; 並使我的圖標元素寬度：1em； 但這似乎也有點不穩定。 我希望有人有更好的主意！

Answer 1

好的，我為此整理了一個小提琴並找到了解決方案......請參閱我的小提琴http://jsfiddle.net/cssguru/7JMkp/ 。 沒有時間在所有瀏覽器中進行驗證。 可能需要一些 IE 調整。