构建可在 IE7 中使用的垂直嵌套 CSS 菜单

Question

仅使用 CSS（和 JS 来应用 :hover 样式），构建水平下拉嵌套菜单的最佳方式是什么？

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

DOM：

<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>

期望的输出：

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

Answer 1

我能够自己创建一个，但我不确定它是否足够好。我宁愿建议您查看jQuery UI Development & Planning Wiki > Menu 页面。该页面列出了几个菜单。

另外，this is a very simple script 用于创建可作为起点的下拉菜单。

编辑

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

1. 您的主菜单<ul> 应该是position: static
2. 所有包含子菜单的<li> 都应该是position: relative
3. 您的所有子菜单<ul> 应该是position: absolute 和display: none。

然后您可以在所有包含子菜单的<li> 元素上实现hover 事件。悬停时，您首先定位直接嵌套在该<li> 内的<ul>，然后显示它。悬停事件还提供了一个在该元素“未悬停”时触发的事件。在这种情况下，您只需隐藏相应的<ul>。容易吗？

要定位子菜单<ul>，只需抓住包含<li> 的宽度并将left: XXXpx; top: 0 设置在您将要显示的<ul> 上。如果子菜单出现在<li> 下方，那么您可以抓住<li> 的高度并将left: 0; top: YYYpx 设置在<ul> 上。绝对相对组合使这种定位成为可能。

此时您还可以考虑实现“边缘检测”...即检查菜单是否扩展超出了视口的右边缘或下边缘。相当棘手。

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