菜单转换CSS

我的问题是，当页面加载时，如果鼠标位于下拉菜单出现的位置，它会打开菜单，因为我不希望菜单打开，除非指针位于菜单选项（即信息、主页等）上

我的网站菜单当前使用CSS，因此当我悬停菜单选项时，下拉菜单将淡入：

.mega-menu{
    visibility:none;
    z-index:-1;
    opacity:0
    transform: TranslateY(-.5em);
    transition: all 0.3s ease-in-out 0s,visibility 0s linear 0.3s,z-index 0s linear .1s;
}

.mega-menu:hover
.mega-drop-down a:hover+.mega-menu,
.mega-drop-down a:hover + .tab-content{
    visibility:visible;
    z-index:999;
    opacity:1;
    transform: translateY(0%);
    -webkit-transition: 0.5s linear 0.3s;
}

.mega-drop-down:hover .tab-pane.active, .mega-drop-down:hover .container-fluid, .mega-drop-down:hover .list-inline > li{
visibility:visible !important;
}

我尝试使用

display:none

和

display:block

但随后它失去了过渡效应

是否有什么可以做的，以使过渡仍然发生，并与菜单显示的问题，而页面加载是战斗

更新： 菜单：

通过深入研究@Illdapt，我设法解决了我的问题

我将

.hidden类

和

包装ID

添加到：

<div class="animated fadeIn mega-menu">

并使用jquery：

$(document).ready(function(){ 
    $('#wrapper').removeClass('hidden');
    });

然后，在加载DOM后，删除隐藏类并解决上述问题

---

再次感谢@Illdapt

在DOM完全加载之前，您可以使用

display:none

。然后，当DOM完全加载后，更改为

display:block

。显示属性丢失动画的问题是此CSS属性不支持动画。这里的想法是防止在加载之前看到的行为，然后在加载之后它应该按照您的方式工作。要使用

z索引

，元素必须具有

位置

，而不是

静态

（默认值）。你能在有问题的菜单中添加你的HTML吗？你说当我悬停菜单选项时，下拉菜单会淡入，但你的CSS看起来就像是当你悬停一个不可见的

菜单选项时，它会显示
菜单选项
。。。不是下拉列表。@zgood我的菜单使用了
位置：relative
，所以我假设z索引应该工作？我现在将添加HTML…@Illdapt这将是完美的，但我不确定如何做到这一点（我仍然是一个初学者lol:-）。我请求使用JQuery，比如
document.addEventListener（“DOMContentLoaded”，function（event）{
<div id="wrapper" class="animated fadeIn mega-menu hidden">

.hidden{
    display:none;
}

$(document).ready(function(){ 
    $('#wrapper').removeClass('hidden');
    });