Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

3rd Level JQuery Dropdown Not Displaying

Trying to get 3 level dropdown working. In Opencart I have been using a third party repsonsive menu which works great. Demonstrated and available here http://cssmenumaker.com/menu/responsive-flat-menu

However, Opencart doesn't support 3 level categories so an addon is needed https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=19296

the 3rd levels categories are loaded but no displaying. Can anyone help get the thrid category and two systems merged and displaying over 1000px and even loading too with a + symbol?

Here is the dropdown menu in action at Plunkr https://plnkr.co/edit/hZG4pbVCXQupf2kgqoKF?p=preview

<div id="cssmenu"><div id="menu-button">Menu</div>
    <ul>
        <li class="has-sub"><span class="submenu-button"></span><a href="extractor-fans">Extractor Fans</a>
            <ul style="">
                <li><a class="arrow" href="/bathroom-extractor-fans">Bathroom Shower</a>
                    <div class="has-sub"><span class="submenu-button"></span>
                        <ul>
                            <li><a href="bathroom-vids">Designer Videos</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="ceiling-bathroom"> Bathroom Cabinets</a></li>
            </ul>
        </li>
    </ul>
</div>

3rd Dropdown not Displaying, although loaded

like image 475
me9867 Avatar asked Jan 17 '17 13:01

me9867


1 Answers

Here's my version, without changing your html and js. All of the changes are strictly within css. Most of the fix lied in getting rid of the following:

#cssmenu ul ul ul {
    margin-left: 100%;
}
#cssmenu ul ul {
    left: -9999px;
}

https://plnkr.co/edit/x4Lbw9AepcdIhkzBoAPM?p=preview

like image 153
Serg Chernata Avatar answered Oct 03 '22 09:10

Serg Chernata