使用纯 CSS（HTML 列表）在同一父级下悬停时设置其他子级的属性

Question

我正在尝试制作带有子菜单的 CSS 菜单。当我将鼠标移到列表的子元素上时，我希望子菜单出现在该子元素中（如果有的话）。

正如上面可以看到的那样，出现了子菜单，但是当我将光标移到用圆圈标记的区域时，我不希望这种情况发生。这些是填充区域。

这是我的标记：

<ul>
   <li><a href="/home">Home</a></li>
   <li><a href="#">About Us</a>
      <ul>
         <li><a href="/mission">Our Mission</a></li>
         <li><a href="/vision">Our Vision</a></li>
      </ul>
   </li>
</ul>

这是 CSS：

a { color: #000; text-decoration: none; }
a:hover { color: #A0A0A0; }
ul > li { float: left; padding: 0px 30px; list-style-type: none;  
          margin: 0px 5px; background-color: #CACACA; }
ul > li:hover > ul { display: inline; }
ul > li > ul { position: fixed; display: none; }

现在这段代码没有问题。正如您在this fiddle 中看到的那样，它按我的意愿工作，当我将鼠标移到“关于我们”菜单上时会出现子菜单。

但是，我的问题是菜单项中有空格（填充），即使我将鼠标悬停在这些空格上也会出现子菜单。但我希望子菜单仅在将<a> 元素悬停在<li> 内时出现。

为此，我尝试了该代码：

ul > li > a:hover > ul { display: inline; }

代替现有的：

ul > li:hover > ul { display: inline; }

但它不起作用，我没想到因为<a> 和<ul> 是同一个<li> 元素的子元素。

我正在为 CMS 创建模板，因此我不想过多地参与 jQuery 实现，例如为列表元素设置 ids 或 classes。我想用纯 CSS 实现。

我将在列表元素之间使用单独的图像，所以我必须使用padding 而不是margin。

如果我使用margin，这将很容易，因为列表元素的width 与<a> 元素的width 相同。

但是在这里，在所有这些例外之后，我需要一些帮助。任何想法都受到高度赞赏。

提前致谢。

Answer 1

这是可能的，但仅此而已，并且有一些相当严重的警告；首先是隐藏/显示子菜单的 CSS：

ul > li > ul {
    position: fixed;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}
ul > li a:hover + ul,
ul > li:hover a + ul:hover{
    opacity: 1;
    -moz-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

JS Fiddle demo.

现在，注意事项：

1. display 属性不会动画（它不能，none 和 inline-block 之间（或属性的任何其他有效值之间）没有临时状态，因此子菜单始终必须在页面上“可见”/“存在”（尽管在大多数浏览器中隐藏它的不透明度为 0）。
2. 过渡是必要的，因为这是光标有时间从a 链接移动到ul 而不会立即隐藏的唯一方法；过渡基本上是一个时间延迟，以允许第二个选择器 ul > li:hover a + ul:hover 匹配。
3. 跨浏览器兼容性可能是个问题，因为 Internet Explorer transitions，请注意，直到版本 9 才出现不透明度。
4. 但是，主要问题是选择器的特异性。使用这种技术为任意深度的菜单编写选择器将是相当困难的。所以，虽然可能，但我当然不推荐使用这种方法，因为它似乎太容易失败。

Answer 2

也许更简单的方法是使用 CSS 对等选择器 +。因为子菜单<ul> 不是<a> 标签的直接子菜单，所以不能使用>。而是使用对等选择器+ 选择特定类型的所有后续对等。

换句话说：ul li a:hover + ul { display: inline; }

它有good browser support.