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

Question

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

我正在尝试采用菜单here，但我无法实现我想要的定位。每当我尝试这个时，我都会收集到如此多的CSS cludge，以至于它已经不再可管理了。

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。

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

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

此时您还可以考虑实施“边缘检测”...即检查菜单是否扩展到视口的右边缘或底边缘。非常棘手。

请注意，在IE7中，在渲染菜单（并触发悬停事件）时会出现问题，但根据HTML规范，您的菜单是正常的。要解决此问题，您可能需要在子菜单上设置z-index。