0

我正在尝试制作带有子菜单的 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; }

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

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

为此，我尝试了该代码：

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

而不是现有的：

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

但它没有用，我没想到因为<a>and<ul>是同一个<li>元素的孩子。

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

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

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

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

提前致谢。

4

2 回答 2

2

这是可能的，但仅此而已，并且有一些相当严重的警告；首先是隐藏/显示子菜单的 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 小提琴演示。

现在，警告：

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

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

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

它有很好的浏览器支持。

于 2013-06-23T20:53:49.640 回答