Html 下拉菜单上的淡入效果不'；不可能总是这样

我希望我的下拉菜单在鼠标悬停时具有淡入效果。我已经为此编写了以下代码，但淡入效应有时可以观察到，但并不总是如此。代码：

*{
保证金：0；
填充：0；
}
.标题{
位置：固定；
列表样式类型：无；
高度：35px；
宽度：100%；
背景:#333333；
}
.header>li{
显示：内联块；
填充：8px；
位置：相对位置；
颜色：#FFF；
}
.header>li:悬停{
背景：#000000；
}
.下拉菜单{
列表样式类型：无；
显示：无；
位置：绝对位置；
最高：100%；
左：0；
颜色：红色；
宽度：100%；
不透明度：0；
背景：黄色；
边框：1px纯黑；
过渡：不透明度1s；
}
.下拉列表：悬停ul{
不透明度：1；
显示：块；
}

测试
下拉菜单❱；

项目1
项目2
项目3

显示

不是可设置动画的属性，因此您可以使用它代替显示

这是你的工作清单

*{
保证金：0；
填充：0；
}
.标题{
位置：固定；
列表样式类型：无；
高度：35px；
宽度：100%；
背景:#333333；
}
.header>li{
显示：内联块；
填充：8px；
位置：相对位置；
颜色：#FFF；
}
.header>li:悬停{
背景：#000000；
}
.下拉菜单{
列表样式类型：无；
/*显示：无*/
可见性：隐藏；
位置：绝对位置；
最高：100%；
左：0；
颜色：红色；
宽度：100%；
不透明度：0；
背景：黄色；
边框：1px纯黑；
过渡：能见度1s，不透明度1s；
}
.下拉列表：悬停ul{
不透明度：1；
能见度：可见；
}

测试
下拉菜单❱；

项目1
项目2
项目3

您可以使用一点jQuery来实现这一点

$('.header ul').hide();
$('.header li').hover(function(){
        $(this).find('ul').fadeIn();
}, function(){
        $(this).find('ul').fadeOut();
});

JSIDLE链接如下：

如果你还想保持HTML/CSS格式，那就放弃显示的概念，使用可见性

.dropdown ul {
  list-style-type: none;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  color: red;
  width: 100%;
  opacity: 0;
  background: yellow;
  border: 1px solid black;
  transition: visibility 1s, opacity 1s;
}

.dropdown:hover ul {
  opacity: 1;
  visibility: visible;
}

---

jshiddle链接到HTML/CSS解决方案：

谢谢！CSS是否支持

/

行注释？@CoolGuy不客气。不，不是。这是我的错。谢谢你的帮助，但是jQuery的第一把小提琴没有显示菜单。第二个选项不使用

可见性

，因此，当鼠标悬停在“下拉列表”下方时❱", 此时会出现下拉菜单。。。