submenu toggleable collapse by default

Question

sorry if it is a dumb question

but I have a menu with 1 submenu in my app (jsf - primefaces 7) the menu is on all my pages (I have a master page)

I want the submenu to be collapsed by default, I don't want to keep the state

so the user has to expand -> click on an item in the submenu

but I can't make it work

<p:menu toggleable="true">
      <p:menuitem value="page1" outcome="page1"/>
      <p:menuitem value="page2" outcome="page2"/>
      <p:menuitem value="page3" outcome="page3"/>
      <p:menuitem value="page4" outcome="page4"/>
    
      <p:submenu label="submenu" expanded="false">
            <p:menuitem value="page5" outcome="page5" />
      </p:submenu>
</p:menu>

I have two problems

1. if the pages take a bit of time to load, we can see that the submenu is expanded before collapsing
2. once I navigated to another page (for example page2), after the redirection, the submenu is expanded

Answer 1

It's a primefaces issue, you can see it also in the Primefaces showcase, at Toggleable menu.

You can achieve the desired behavior by using

<p:menubar>

instead of

<p:menu>

for auto display on mouse hover, use

<p:menubar autoDisplay="true">