Html 纯CSS下拉菜单在错误元素悬停时触发

所以我有一个纯css下拉菜单，但我有一个问题。当您将鼠标悬停在某个链接上时，下拉菜单会起作用，但当您将鼠标悬停在包含下拉菜单部分的实际容器上时，下拉菜单也会触发。下面是一个包含代码的JSFIDLE

链接1
链接2
链接3




链接1
链接2
链接3




链接1
链接2
链接3



.clearfix:之前，
.clearfix:在{
内容：“；
显示：表格；
}  
.clearfix:在{
明确：两者皆有；
}  
.clearfix{
*缩放：1；
}  
导航{
宽度：100%；
高度：60px；
背景色：黑色；
边框底部：#ffd600实心10px；
保证金：0自动；
}
导航ul{
位置：inheirt；
}
李国荣{
过渡：所有.6s易于输入输出；
-moz转换：所有.6秒都易于输入输出；
-o型过渡：所有.6s易于输入输出；
-webkit过渡：所有.6s易于输入输出；
宽度：80px；
高度：60px；
左边距：10px；
显示：；
浮动：左；
线高：60px；
文本对齐：居中；
列表样式：无；
职位：继承；
颜色：白色；
文字装饰：无；
}
nav ul li:悬停{
宽度：80px；
-moz转换：所有.6秒都易于输入输出；
-o型过渡：所有.6s易于输入输出；
-webkit过渡：所有.6s易于输入输出；
高度：60px；
左边距：10px；
背景色：#ffd600；
浮动：左；
线高：60px；
文本对齐：居中；
列表样式：无；
职位：继承；
颜色：白色；
文字装饰：无；
}
海军ulli a{
颜色：白色；
文字装饰：无；
}
html{
背景色：#F2F2；
}
#下拉列表{
宽度：100%；
高度：200px；
不透明度：0.8；
背景色：黑色；
显示：无；
}
.下拉列表{
边缘顶部：10px；
}
.下拉列表李{
宽度：300px；
背景色：#ffd600；
}
导航ul{
不透明度：0；
过渡：所有.6s易于输入输出；
-moz转换：所有.6秒都易于输入输出；
-o型过渡：所有.6s易于输入输出；
-webkit过渡：所有.6s的易用性
}
导航ul li：悬停>ul{
不透明度：0.8；
过渡：所有.6s易于输入输出；
-moz转换：所有.6秒都易于输入输出；
-o型过渡：所有.6s易于输入输出；
-webkit过渡：所有.6s易于输入输出；
}
李国宝{
不透明度：1.0！重要；
}
导航ulli:悬停{
宽度：350px！重要；
}

尝试使用

可见性：隐藏

而不是像这样编辑悬停时的不透明度：

现在，您可以编辑一点过渡计时，使其更平滑

此外，过渡属性只能用于不透明度，而不能用于所有属性。

请使用以下选项

/* Your dropdown */
nav ul ul {
    opacity: 0;
    visibility:hidden;
    transition: opacity .6s ease-in-out;
    -moz-transition: opacity .6s ease-in-out;
    -o-transition: opacity .6s ease-in-out;
    -webkit-transition: opacity .6s ease-in
}

/* Code to display your dropdown */
nav ul li:hover > ul {
    opacity: 0.8;
    visibility:visible;
}

关于一个有效的例子，请点击这里

说明： 您的

.dropdown

仍然存在，它的

不透明度
为
0

每当您将鼠标悬停在该“不可见”下拉列表上时，就会触发其父项的悬停样式，从而再次显示
.dropdown

解决方案：为您的
下拉列表设置
的
可见性
的
隐藏
，并仅当您将鼠标悬停在父
li
上时，将
可见性
设置为
可见

另外，仅使用
不透明度
属性上的转换，然后立即更改
可见性
，但
不透明度
平滑转换

PS：如果你想知道我为什么不使用显示：无，那是因为你不能转换显示(

/* Your dropdown */
nav ul ul {
    opacity: 0;
    visibility:hidden;
    transition: opacity .6s ease-in-out;
    -moz-transition: opacity .6s ease-in-out;
    -o-transition: opacity .6s ease-in-out;
    -webkit-transition: opacity .6s ease-in
}

/* Code to display your dropdown */
nav ul li:hover > ul {
    opacity: 0.8;
    visibility:visible;
}