我正在使用来自 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>
最佳答案
如果没有看到要调试的页面,很难说 100% 肯定,但我可以想象以下......
为避免任何内容跳转,请确保使用 CSS 隐藏嵌套的 UL,而不是依赖 JavaScript 来隐藏子菜单。如果您使用的是 Firebug 或 Chrome,请在禁用 JavaScript 时检查代码,以确保您没有样式覆盖您的显示:无;在菜单项 A 下的第一个 UL 上。
此外,如果 #menu .sub ul { display: block; 的目的}
是为了让您的第二级嵌套 UL 保留为 block 元素,您缺少 .sub 父级的 .sub 类,因此将 .sub 类添加到您的子标题 LI。
关于jquery - 页面加载时的垂直 jquery megamenu 插件子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15362139/