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

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 时检查代码，以确保您没有样式覆盖您的显示:无；在菜单项 A 下的第一个 UL 上。

此外，如果 #menu .sub ul { display: block; 的目的} 是为了让您的第二级嵌套 UL 保留为 block 元素，您缺少 .sub 父级的 .sub 类，因此将 .sub 类添加到您的子标题 LI。