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

我创建了Suckerfish的儿子（http://htmldog.com/articles/suckerfish/dropdowns/）基于CSS的导航菜单。左侧是正常的Suckerfish，其中顶级导航条目与下拉菜单的宽度相同。如何创建一个右对齐的su鱼菜单，其顶部链接是可变宽度的？

在我的菜单的右侧，我有几个小图标，如帮助和选项，也有下拉菜单。问题是我需要将它们对齐，以便它们不会脱离页面，因为图标很窄并且正确地浮动。

字样的图片时间:)

_______________________________________________________ 
| 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 instea d，并通过我的图标（16px）的宽度减少负的左侧边距，但这很不方便。它不会处理字体缩放。我想到的另一个技巧是使用margin-left：-9em;并使我的图标元素宽度：1em;但是这似乎也有点不可思议。我希望有人有一个更好的主意！

来源

2011-06-14 mtjhax

如果你可以制作一个[jsFiddle demo]（http://jsfiddle.net/）到目前为止，它确实会有所帮助。 – thirtydot 2011-06-14 01:30:28

我正在做的那个项目因为我没有时间了。当然人们做了这一千次 - 惊讶没有人有一个快速的答案。也许现在没有人使用suckerfish/suckerfish风格的CSS菜单。 – mtjhax 2012-01-24 23:54:01

有了测试用例，你肯定会得到一个答案（来自我！）。总的想法是：在'：hover'上为最后一个'li'，在'ul'上设置'right：0'或'right： - <包含li> px'的宽度或者可能'left：100 ％'。 – thirtydot 2012-01-25 00:35:39

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

来源

2012-06-04 23:52:06

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

回答

相关问题