css - PrimeFaces menubar scroll blocks submenu -

I am developing a simple CRUD web app that wants to edit Tables users, they are placed in a menu, Where users can select them and edit them As it is not known that all users have large monitors like I do this, I stumbled over my problem. When the monitor or browser window is not enough to display the entire menu, a vertical scroll is scrolled in the menu and the submenu does not appear until it is scrolled in the menu (hidden below). Although you get a horizontal scroller, but it is not very practical.

I know this is a CSS problem, but I am not an expert in CSS. I know basic information to zoom in and out of my webpage here but it is beyond my CSS-knowledge. I have searched the web and found that people have problems similar to panels, I have tried their solutions but it does not work on my case.

You are out of all Web / CSS experts, please help me. I know that I have spent many hours in solving CSS problems and I really appreciate it if someone is fast Can solve.

I have tried to post a picture of this problem, but I do not have enough reputation points, so instead I will just post the code:

  & lt; H: form & gt; & Lt; P: menubar & gt; & Lt; P: submenu label = "menu 1" icon = "ui-icon-document" & gt; & Lt; P: submenu label = "option1" & gt; & Lt; P: menu item = "sub option 1" url = "#" /> & Lt; P: menu item = "subpolar 2" url = "#" /> & Lt; P: menu item = "sub-option 3" url = "#" /> & Lt; P: menu item = "sub-option4" url = "#" /> & Lt; / P: submenu & gt; & Lt; P: menu value = "option2" url = "#" /> & Lt; P: menu value = "option3" url = "#" /> & Lt; P: menu value = "option4" url = "#" /> & Lt; P: Menu Value = "Option 5" url = "#" /> & Lt; P: menu item value = "option 6" url = "#" /> & Lt; P: Menu Value = "Choice 7" url = "#" / & gt; & Lt; P: menu value = "option 8" url = "#" /> & Lt; P: menu item value = "option 9" url = "#" /> & Lt; P: menu item value = "option 10" url = "#" /> & Lt; P: menu item value = "option 11" url = "#" /> & Lt; P: menu item value = "option 12" url = "#" /> & Lt; P: Menu Value = "Choice 7" url = "#" / & gt; & Lt; P: menu value = "option 8" url = "#" /> & Lt; P: menu item value = "option 9" url = "#" /> & Lt; P: menu item value = "option 10" url = "#" /> & Lt; P: menu item value = "option 11" url = "#" /> & Lt; P: menu item value = "option 12" url = "#" /> & Lt; / P: submenu & gt; & Lt; P: submenu label = "menu 2" icon = "ui-icon-document" & gt; & Lt; P: menu value = "option1" url = "#" /> & Lt; / P: submenu & gt; & Lt; / P: Menubar & gt; & Lt; / H: form & gt;  

If you change the height of the browser, the entire menu can not be displayed and you see the vertical scroll. Then if you go to submenu, then it will not be visible anymore.

Perhaps the most intelligent thing is to split menu entries into some type of group, but the customer wants to do this, so I love it very much ...

< P> I'm using Primface 4.0, JB 7.1.1, Netbeans 7.4, Chrome 32

Let me know if you need more information. Thank you.

Since the menubar items are slightly higher, the scrollbar will appear.

To maintain the submenu case, I had to override the runtime style which would be PrimeFaces.widget.Menubar javascript class.

The form contains this script.

  & lt; Script & gt; PrimeFaces.widget.Menubar.prototype.activate = function (B) {this.highlight (b); Var a = b.children ("ul.ui-menu-child"); If (a.length == 1) {b.parent () CSS ('display', 'table') this. ShowSubmenu (b, a)} else {b.parent (.css) ('display', 'block')}} & lt; / Script & gt;  

An example of doing a small job can be found and one.

Note: Display: 'Table' is not supported in IE 7 and earlier. IE8 is required! DOCTYPE supports IE9 values.

Hope it helps.