Primefaces menubar menuitem Width

Question

I am having trouble with the menuitem :(

Wanted to include a pic, but wasnt allowed So question is stupid without it

I can't seem to change the width of the drop down menu, I have included a style in my head and a width attrib in each menuitem, but they have made no difference:

<style>
ui-menu .ui-menu-parent .ui-menu-child
{
    width: 400px; /* exagerated !! */
}
</style>

When the menu item is higlighted, the selection bar is the correct width !

Any Clues ???, here is an example menubar

<p:menubar>
    <p:submenu label="Menu 1"
        style="text-align: left;">

        <p:menuitem ajax="false" 
                    action="/Page1"
                    value="Page 1" 
                    style="width: 350px;"/>

        <p:menuitem ajax="false" 
                    action="/too_long_page"
                    value="Some really long menu text that is far too long"
                    style="width: 350px;" />

        <p:menuitem ajax="false" 
                    action="/too_long_page"
                    value="Some really long menu text that is far too long"
                    style="width: 350px;" />

    </p:submenu>
    <p:menuitem ajax="false" 
                action="/Page2"
                value="Page 2" />
</p:menubar>

Answer 1

if you want the width follow your content, use this

ul.ui-menu-child {
    white-space: nowrap;
    width: auto !important;
}

Answer 2

use this:

<style>    
       ul.ui-menu-child
        {
            white-space: nowrap;
            width: 290px !important;
        }
</style>

Only change the pixels that you need :) and dropdown width of menu will change.