Question

我的问题是，当页面加载时，如果鼠标坐在显示下拉的位置，它会打开菜单，因为我不希望菜单打开，除非指针在菜单上-option（即信息，家庭等...）

我的网站菜单目前使用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

然后它失去了过渡效应

有什么可以做的，以便过渡仍然发生，并且页面加载时菜单显示的问题是否得到了解决？

更新：菜单：

<nav class="content">
    <ul class="exo-menu">
        <li><a class="active menhome" href="/"><i class="fa fa-home"></i> Home</a></li>
        <li class="mega-drop-down"><a href="#" onclick="return false"><i class="fa"></i> Mega-drop-down</a>
            <div class="animated fadeIn mega-menu">
                <div class="mega-menu-wrap">
                    <div class="row">
                        <div class="container-fluid">
                            <div class="tab-content">
                                <div class="tab-pane active" id="Featured">
                                    <ul class="nav-list list-inline list-inline2">
                                        <li></li>
                                        <li></li>
                                    </ul>
                                    <ul class="nav-list list-inline list-inline2">
                                        <li></li>
                                        <li></li>
                                    </ul>
                                    <ul class="nav-list list-inline list-inline2">
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</nav>

Answer 1

我设法通过进一步研究@Illdapt来解决我的问题。

我已将.hidden class和wrapper ID添加到：

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

所以它写着：

<div id="wrapper" class="animated fadeIn mega-menu hidden">

使用：

.hidden{
    display:none;
}

并使用了jquery：

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

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

再次感谢@Illdapt

菜单转换CSS

1 个答案: