Javascript 构建在IE7中工作的垂直嵌套CSS菜单

仅使用CSS（和JS应用：悬停样式），构建水平下拉嵌套菜单的最佳方法是什么

我试图采用菜单，但我无法实现我想要的定位。每次我尝试这样做时，我都会遇到太多的CSS问题，以至于无法管理

DOM:

a
b


2
3



1
2
3

期望输出：

---

也就是说，顶部标题是完全水平的，每个标题下的第一个菜单在标题左侧水平排列，所有其他子菜单在右侧水平排列，在顶部垂直排列。我该如何构建这个基本想法呢？

我自己也能创建一个，但我不确定它是否足够好。我建议你们看一下第页。该页面列出了两个菜单

此外，用于创建可能作为起点的下拉菜单

编辑 要创建动态CSS弹出菜单，您需要jQuery支持，主要是因为（i）您必须动态定位子菜单（ii）利用“悬停”事件，这在仅CSS的解决方案中是不可能的

您的主菜单应为“位置：静态”

所有包含子菜单的

都应该是

位置：相对

所有子菜单

应为

位置：绝对
和
显示：无

然后，您可以在包含子菜单的所有

元素上实现

悬停

事件。悬停时，首先定位直接嵌套在该

中的

，然后显示它。悬停事件还提供了一个事件，该事件在该元素“未悬停”时触发。在这种情况下，只需隐藏相应的

。容易吗

要定位作为子菜单的

，只需抓取包含

的宽度并将

设置为左：XXXpx；顶部：您将要显示的
上的0

。如果子菜单出现在

下方，则取而代之的是抓取

的高度并将

设置为左：0；顶部：YYYYPX

位于

上。绝对相对组合使这种定位成为可能

在此您还可以考虑实施“边缘检测”…即检查菜单是否扩展到视图端口的右边缘或下边缘。相当棘手

---

请注意，在IE7中，尽管根据HTML规范，您的菜单是正常的，但正确呈现菜单（并触发悬停事件）时会出现问题。为了解决这个问题，你可能需要在你的子菜单上设置z索引。

你有没有看过《傻瓜鱼之子》？减去jQuery和effects，这就是我需要的确切（或多或少）布局。唯一真正的问题是需要指定宽度，并且生成动态菜单。我可以在服务器端修复这个问题，但是如果完全在前端处理这个问题会更好。（我需要空白：nowrap，这使问题得到修复。）我可以写一篇关于如何创建css+jQuery支持的下拉菜单的文章，但这可能需要一两个小时。尽管如此，我还是为你们编辑了我的答案。

<nav>
  <ul>
    <li>
      <a href="#">Heading 1</a>
      <ul>
         <li><a href="#">1</a>
               <ul><li>a</li><li>b</li></ul>
         </li>
         <li>2</li><li>3</li>
      </ul>
    </li>
    <li>
      <a href="#">Heading 2</a>
        <ul><li>1</li><li>2</li><li>3</li></ul>
    </li>
</nav>