Multi Level Navigation- Drop Down Div Converter

0
I'm currently creating a multi level navigation using the Drop down div converter, my problem is on the 2nd to 3rd Tier. When clicking on the button to extend the 2nd tier it automatically extends the 3rd Tier as well. Rather than hovering over the 2nd tier item to reveal the 3rd tier item. any ideas? Thanks in advance
asked
1 answers
0

You can try this, not sure if it'll work nicely, depending on how you have configured your DDDivConverter widgets.

Use custom CSS to hide the dropdown menu at the 3rd level, only to show when you hover over the button at the 2nd level. The example below relates to the 3 tier level menu that I explained before: https://forum.mendix.com/questions/9180/Multi-Level-Navigation-Bar-

Example in nested CSS:

/* Level 1 main menu item */
div.dropdown-div-converter { // this is where you start your CSS, level 1 main menu item
    button.dropdown-button {
        /* Styling for your level 1 button goes here */
    }

    div.dropdown-menu {
        /* Styling for your level 1 submenu goes here */
        ul {
            li {
                &:hover {
                    div.dropdown-div-converter > div.dropdown-menu {
                        display: block;     // 'Open' the level 2 submenu when you hover over the LI in the level 1 submenu
                    }
                }

                /* Level 2 submenu */
                div.dropdown-div-converter {
                    button.dropdown-button {
                        /* Styling for your level 2 button goes here */
                    }
                    div.dropdown-menu {
                        display:none;       // This 'closes' the level 2 submenu by default by hiding it.
                    }
                }
            }
        }
    }
}

Good luck!

answered