具有奇怪顺序的 CSS 菜单

Question

我有一个关于一个有点奇怪的 CSS 菜单的问题。我需要什么：

• 三个级别
• 第一层必须是水平的
• 第二层必须在第一层之上且垂直
• 三层必须从底部到第一层在水平方向上

应该是这样的（忘了第四级）：

     ...
     B.1.2
     B.1.1

A    B    C    D    E    ...

     B.2.1    B.2.2   ....

     B.3.1
     B.3.2
     ...

您对如何为此构建跨浏览器菜单有任何想法吗？

Answer 1

我在 CSS 中试了一下：http://jsfiddle.net/c8tKC/6/

如您所见，使用 :hover 选择器到达第三层存在问题。您可能希望使用 onClick 事件切换显示属性。

Answer 2

这是我在过去几分钟所做的事情：http://jsfiddle.net/DUfUn/1/

这很糟糕，因为两个值取决于第一个子菜单中的项目数。这必须是动态生成的。但并非不可能，如果您无论如何都用 PHP 脚本填充菜单。我注释了相应的值。

也许这是一个基础，有人可以扩展它，使它变得更有活力。