如何创建一个右对齐的吸盘鱼菜单，其中顶部链接是可变宽度的

Question

我创建了一个Suckerfish之子(http://htmldog.com/articles/suckerfish/dropdowns/)基于CSS的导航菜单。左侧是正常的Suckerfish，其中顶级导航条目与下拉菜单的宽度相同。

在菜单的右侧，我有几个小图标，用于显示帮助和选项，这些图标也有下拉菜单。问题是我需要将它们右对齐，这样它们就不会离开页面，因为图标很窄，而且向右浮动。

文字图片时间：）

_______________________________________________________
| 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），但这很难。它无法处理字体缩放。我想到的另一个技巧是使用左边的空白：-9em；并使我的图标元素宽度：1em；但这似乎也有点不稳定。我希望有人有更好的主意！

Answer 1

好吧，我为此做了一个小提琴，找到了一个解决方案。。。看看我的小提琴http://jsfiddle.net/cssguru/7JMkp/.没有时间在所有浏览器中进行验证。可能需要对IE进行一些调整。