vertical jquery megamenu plugin submenu on page load

Question

I am using jquery Vertical Mega menu from http://www.designchemical.com when my page loads it first shows all of the menus (including the sub menus) for a split second as it renders and then the submenus disappear and it looks like a normal vertical menu.

I tried using the below solution given for horizontal mega menu but that is not working...

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

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

Please suggest how to make it work

html code

<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>

hi i am using code from this site http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/getting-started/ — Jinus Jain, Mar 12 '13 at 13:13
Remove this block of code `#menu .sub ul { display: block; }` and post the results — Morpheus, Mar 12 '13 at 13:21
still same problem sub menu are not visible... only a line appears... — Jinus Jain, Mar 12 '13 at 13:29
It can't be true, because when jQuery finishes loading menu it adds a style to `
`. Inline style overrides styles applied from your css file. — Morpheus, Mar 12 '13 at 13:36

score 0 · Answer 1 · answered Mar 12 '13 at 13:50

Without seeing the page to debug, it's difficult to say for sure 100% but I would imagine the following ...

To avoid any content jumps, make sure the nested UL is hidden with CSS and not relying on JavaScript to hide the sub menus. If you are using Firebug or Chrome, inspect the code while JavaScript is disabled to make sure you have no styles overwriting your display:none; on the first UL directly under Menu Item A.

Also, if the purpose of #menu .sub ul { display: block; } is for your second level nested UL to stay as a block element, you are missing the .sub class from their LI parents, so add a class of .sub to your sub-header LIs.

vertical jquery megamenu plugin submenu on page load

1 Answers1