Question

我正在使用http://www.designchemical.com中的jquery Vertical Mega菜单，当我的页面加载时，它会首先显示所有菜单（包括子菜单），因为它呈现的瞬间，然后子菜单消失，它看起来像一个正常的垂直菜单。

我尝试使用以下针对水平超级菜单的解决方案，但这不起作用......

#mega-1 li ul {
    display: none;
}

#mega-1 .sub ul {
    display: block;
}

请建议如何使其正常工作

html代码

<ul id="mega-1" class="mega-menu">
    <li><a href="#">Menu Item A</a>
        <ul>
            <li><a href="#">Sub-Header 1</a>
                <ul>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                </ul>
            </li>
            <li><a href="#">Sub-Header 2</a>
                <ul>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                </ul>
            </li>
            <li><a href="#">Sub-Header 3</a>
                <ul>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

没有看到要调试的页面，很难确定100％，但我会想到以下内容......

要避免任何内容跳转，请确保使用CSS隐藏嵌套的UL，而不是依赖JavaScript来隐藏子菜单。如果您使用的是Firebug或Chrome，请在禁用JavaScript时检查代码，以确保没有样式覆盖您的显示器：none;在菜单项A下的第一个UL上。

此外，如果#menu .sub ul { display: block; }的目的是让您的第二级嵌套UL保留为块元素，那么您缺少来自其LI父级的.sub类，因此将一个.sub类添加到您的子类中-header LIs。

页面加载时垂直jquery megamenu插件子菜单

1 个答案: