Make ul increase width as per the content

Question

I am having superfish menu implemented in this site

If you hover over the product menu, the drop down will be exactly the width of the main parent menu, even when the content is larger. How do I make the menu go wider as per the content in it. Now the content simply overflows.

Answer 1

Add the following styles to your grid.css or to any other .css-file / header after grid.css:

.sf-menu ul{
    min-width:100%; /* at least the size of the header */
    width:auto; /* size the block automatically */
}
.sf-menu ul li{
    white-space:nowrap; /* prevent word wrap */
}

Notice that this won't have the same results in IE7, however your website is not presented the same in IE7. Works in IE8, IE9 and Firefox 10 (should work in all CSS2 compliant browser).