Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have created a multi level menu with wordpress and no matter what i try the menu will not display correctly.

here is the genereated menu

<div id="cssmenu">
    <ul class="menu" id="menu-header_menu">
        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-306" id="menu-item-306"><a href="http://wordpress.dev">Latest</a>

        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-258" id="menu-item-258"><a href="http://wordpress.dev/category/apps/">apps</a>

            <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-259" id="menu-item-259"><a href="http://wordpress.dev/category/apps/app-store/">app store</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-260" id="menu-item-260"><a href="http://wordpress.dev/category/apps/blackberry-apps/">blackberry</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-261" id="menu-item-261"><a href="http://wordpress.dev/category/apps/play-store/">play store</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-262" id="menu-item-262"><a href="http://wordpress.dev/category/apps/tablet-apps/">tablet apps</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-263" id="menu-item-263"><a href="http://wordpress.dev/category/apps/wp-store/">wp store</a>

                </li>
            </ul>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-277" id="menu-item-277"><a href="http://wordpress.dev/category/business/">business</a>

        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-278" id="menu-item-278"><a href="http://wordpress.dev/category/gadgets/">gadgets</a>

            <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-279" id="menu-item-279"><a href="http://wordpress.dev/category/gadgets/galaxy-note-2-and-3/">galaxy note 2 and 3</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-280" id="menu-item-280"><a href="http://wordpress.dev/category/gadgets/galaxy-s3s4/">galaxy s3/s4</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-281" id="menu-item-281"><a href="http://wordpress.dev/category/gadgets/htc-one/">htc one</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-282" id="menu-item-282"><a href="http://wordpress.dev/category/gadgets/huawei/">huawei</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-283" id="menu-item-283"><a href="http://wordpress.dev/category/gadgets/iphone-gadgets/">iphone</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-284" id="menu-item-284"><a href="http://wordpress.dev/category/gadgets/meizu/">meizu</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-285" id="menu-item-285"><a href="http://wordpress.dev/category/gadgets/motorola/">motorola</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-286" id="menu-item-286"><a href="http://wordpress.dev/category/gadgets/nokia-lg/">nokia, LG</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-287" id="menu-item-287"><a href="http://wordpress.dev/category/gadgets/pantech/">pantech</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-288" id="menu-item-288"><a href="http://wordpress.dev/category/gadgets/sony/">sony</a>

                </li>
            </ul>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-290" id="menu-item-290"><a href="http://wordpress.dev/category/mobile/">mobile</a>

            <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-293" id="menu-item-293"><a href="http://wordpress.dev/category/mobile/iphone/">iphone</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-291" id="menu-item-291"><a href="http://wordpress.dev/category/mobile/android/">android</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-292" id="menu-item-292"><a href="http://wordpress.dev/category/mobile/blackberry/">blackberry</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-294" id="menu-item-294"><a href="http://wordpress.dev/category/mobile/windows-phone/">windows phone</a>

                </li>
            </ul>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-296" id="menu-item-296"><a href="http://wordpress.dev/category/tablets/">tablets</a>

            <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-297" id="menu-item-297"><a href="http://wordpress.dev/category/tablets/acer/">acer</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-298" id="menu-item-298"><a href="http://wordpress.dev/category/tablets/asus/">asus</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-299" id="menu-item-299"><a href="http://wordpress.dev/category/tablets/ipad/">ipad</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-300" id="menu-item-300"><a href="http://wordpress.dev/category/tablets/note-10-1/">note 10.1</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-301" id="menu-item-301"><a href="http://wordpress.dev/category/tablets/note-8/">note 8</a>

                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-302" id="menu-item-302"><a href="http://wordpress.dev/category/tablets/surface/">surface</a>

                </li>
            </ul>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-295" id="menu-item-295"><a href="http://wordpress.dev/category/products/">products</a>

        </li>
    </ul>
</div>

here is the css i tried, its long so i put it in jsfiddle.

i tried a few of the menus found on this site css menu maker and was able to get one to work. I know the css has #cssmenu ul li.has-sub and thats why it doenst work but i did change it to #cssmenu ul ul.sub-menu li for where it was needed and it didnt work. I tried looking for wordpress barebone multi level menu css so that i can work off of it but wasnt able to find anything.

share|improve this question
add comment

1 Answer

Your entire CSS code assumes, that menu items that have submenus, also have .has-sub class. But in your HTML code, there is no such class added anywhere.

All you have to do is to change every .has-sub occurence in your CSS code to li.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.