设置其他子项'；s属性悬停在具有纯CSS（HTML列表）的同一父级下_Html_Css_Hover_Html Lists

设置其他子项'；s属性悬停在具有纯CSS（HTML列表）的同一父级下

html css

设置其他子项'；s属性悬停在具有纯CSS（HTML列表）的同一父级下,html,css,hover,html-lists,Html,Css,Hover,Html Lists,我正在尝试制作一个带有子菜单的CSS菜单。当我将鼠标移动到列表的子元素上时，如果有子菜单，我希望子菜单显示在该子元素的内部正如上面可以看到的，子菜单出现了，但我不希望在我用圆圈标记的区域上移动光标时发生这种情况。这些是填充区域以下是我的标记： <ul> <li><a href="/home">Home</a></li> <li><a href="#">About Us</a>

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

现在这个代码没有问题了。正如您在中所看到的，它按照我的要求工作，当我将鼠标移到“关于我们”菜单上时，子菜单将出现

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

元素悬停在

中时显示

为了实现这一点，我尝试了以下代码：

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

而不是现有的：

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

但是它没有起作用，我没有预料到，因为

和

是同一

元素的子元素

我正在为CMS创建一个模板，所以我不想过多地涉及jQuery实现，比如为列表元素设置

id

s或

class

es。我想用纯CSS实现

我将在列表元素之间使用分隔图像，因此我必须使用

填充

而不是

边距

如果我使用的是

边距

，这将很容易，因为list元素的

宽度

将与

元素的

宽度

相同

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

提前感谢。

这是可能的，但只是公正的，并且有一些相当严重的警告；首先使用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;
}

现在，需要注意的是：

display

属性不会产生动画（它不能，在

none

和

inline block

之间（或属性的任何其他有效值之间）没有过渡状态），因此子菜单在页面上始终必须是“可见的”/“存在的”（尽管在大多数浏览器中不透明度为

将其隐藏）

转换是必要的，因为这是光标有时间从

链接移动到

ul

而不立即隐藏的唯一方式；转换基本上是一个延时，允许第二个选择器

ul>li:hover a+ul:hover

匹配

跨浏览器兼容性可能是一个问题，因为Internet Explorer<10不支持

转换

，请注意，在版本9之前，不透明性也不受支持

然而，主要的问题是选择器的特殊性。使用这种技术为任意深度的菜单编写选择器将相当困难。因此，虽然这是可能的，但我当然不建议使用这种方法，因为它似乎太容易失败

这是可能的，但只是有一些相当严重的警告；首先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;
}