How to add sub-menu similar to p-menubar ?

[RyanKwan]

May I ask how to add sub-menu in the Avalon theme similar to the p-menubar demo (https://www.primefaces.org/primeng/#/menubar) ? I would like to show sub-menu similar to the demo [File] -> [New] -> [Project / Other] ? I.e. submenu show on the right hand side instead of inline expand.

The reason to request this features is because inline sub-menu has indentation, after two levels of submenu / indentation, that sub-menu width is not wide enough to display my text. My text will line wrapped into multiple lines which is not desirable.

It's not an issue in horizontal mode as I can change the _main.scss > ul.layout-menu > li > ul > width from 250px to another value. However, I have no idea how to address the issue for static or overlay mode. I expect submenu should be able to show on the right next to the master menu.

[cagatay.civici]

Following css takes the submenu to the right as an overlay;

Code: Select all

.layout-wrapper .layout-menu li ul {
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    left: 250px;
    top: 0;
    display: block;
    background: #ffffff;
    min-width: 250px;

Issue is that, the layout-sidebar has overflow:auto for nanoscroller so you need to remove overflow so that the submenus can go out of boundaries.