title: PrimeFaces menubar scroll blocks submenu
body: <p>I am developing a simple CRUD web app. Tables that users want to edit are placed in a menu, where users can select them and than edit them. As it turns out not all users have big monitors like I do so here I stumbled upon my problem. When monitor or browser window is not big enough to display the whole menu, menu gets a vertical scroller and as long as menu has scroller, submenus are not visible (hidden below). You do however get a horizontal scroller but that is not very practical.</p>
  
  <p>I know that it is a CSS problem but I've never been an expert in CSS. I know the basics to tweek my webpage here and there but this is beyond my CSS-knowledge. I've searched the web and found that people have similar problems with panels. I've tried their solutions but it didn't work on my case.</p>
  
  <p>All of you web/CSS experts out there, please help me. I know in the past I've spent plenty of hours resolving similar CSS problems and I'd really appreciate if someone can solve it faster.</p>
  
  <p>I've tried to post a picture of the problem but I don't have enough reputation points so I'll just post code instead:</p>
  
  <pre><code>&lt;h:form&gt;
      &lt;p:menubar&gt;  
          &lt;p:submenu label="Menu 1" icon="ui-icon-document"&gt;  
              &lt;p:submenu label="Choice 1" &gt;
                   &lt;p:menuitem value="SubChoice 1" url="#" /&gt;  
                   &lt;p:menuitem value="SubChoice 2" url="#" /&gt;  
                   &lt;p:menuitem value="SubChoice 3" url="#" /&gt;  
                   &lt;p:menuitem value="SubChoice 4" url="#" /&gt;  
              &lt;/p:submenu&gt;
              &lt;p:menuitem value="Choice 2" url="#" /&gt;  
              &lt;p:menuitem value="Choice 3" url="#" /&gt;  
              &lt;p:menuitem value="Choice 4" url="#" /&gt;  
              &lt;p:menuitem value="Choice 5" url="#" /&gt;  
              &lt;p:menuitem value="Choice 6" url="#" /&gt;  
              &lt;p:menuitem value="Choice 7" url="#" /&gt;  
              &lt;p:menuitem value="Choice 8" url="#" /&gt;  
              &lt;p:menuitem value="Choice 9" url="#" /&gt;  
              &lt;p:menuitem value="Choice 10" url="#" /&gt;  
              &lt;p:menuitem value="Choice 11" url="#" /&gt;  
              &lt;p:menuitem value="Choice 12" url="#" /&gt; 
              &lt;p:menuitem value="Choice 7" url="#" /&gt;  
              &lt;p:menuitem value="Choice 8" url="#" /&gt;  
              &lt;p:menuitem value="Choice 9" url="#" /&gt;  
              &lt;p:menuitem value="Choice 10" url="#" /&gt;  
              &lt;p:menuitem value="Choice 11" url="#" /&gt;  
              &lt;p:menuitem value="Choice 12" url="#" /&gt; 
          &lt;/p:submenu&gt;  
          &lt;p:submenu label="Menu 2" icon="ui-icon-document" &gt;  
               &lt;p:menuitem value="Choice 1" url="#" /&gt;  
          &lt;/p:submenu&gt;  
      &lt;/p:menubar&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>You can replicate the issue if you resize the browser to the height that the whole menu cannot be displayed anymore and you see a vertical scroll. Then if you go on a submenu it will no longer be visible.</p>
  
  <p>Probably the most sensible thing would be to divide this menu entries into some kind of groups, but the customer wants it like this so I don't have much choice...</p>
  
  <p>I'm using Primefaces 4.0, JBoss 7.1.1, NetBeans 7.4, Chrome 32</p>
  
  <p>Let me know if you need any more info. Thanks.</p>