How can I widen the submenu item area of a particular top-level menu item?

I have added a verboser-than-the-rest submenu item, so that the end of it is truncated:

As you can see, the "Customer Category Maintenance" submenu item is truncated. I want to increase the width of the submenu area, so that it displays in full. How?

The table in which it appears has a width value of "100%":

<div id="UtilityMenu" style="display:none">
<table bgcolor="#dddddd" align="left" valign="top" height="100%" width="100%" cellpadding="2" cellspacing="0" 
border="0" style="cursor:hand" style="border: 1pt ridge #000000">

The new submenu item is:

    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/custmaint_categoryadmin.aspx');"><b>Customer Category Maintenance</b></font></td></tr>

I would expect that "width = 100%" would mean that the area would expand as much as needed to accommodate all text of the submenu items, but that is manifestly not the case. What must I do, then, to increase the width a smidgin? Do I need to add a hard-coded pixel width, and experiment with it until it's wide enough, or is there a more elegant way?

Here is more of the html, if needed (in context):

<div id="UtilityMenu" style="display:none">
<table bgcolor="#dddddd" align="left" valign="top" height="100%" width="100%" cellpadding="2" cellspacing="0" 
border="0" style="cursor:hand" style="border: 1pt ridge #000000">
<tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" 
onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun
('pages/orderget.aspx');"><b>Get Orders</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/treeview.aspx?');"><b>Doc. Repository</b></font></td></tr>
<%If LCase(Trim(Session("SecurityGroup"))) = "admin" Or LCase(Trim(Session("SecurityGroup"))) = "cpsadmin" 
Then%>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/usermaint.aspx');"><b>User Security</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/unitmaint.aspx');"><b>Unit Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/membmaint.aspx');"><b>Member Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/custmaint.aspx');"><b>Customer Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/custmaint_categoryadmin.aspx');"><b>Customer Category 
Maintenance</b></font></td></tr>
<%End If%>

UPDATE

I was so sure the answer would work that I go ahead and marked it as correct and awarded the bounty; however, it doesn't work for me.

I added this CSS to the page:

<head>
. . .
<title>Main Menu</title>

<style>
#UtilityMenu {
    width: auto;
    white-space: nowrap;
}
</style>
</head>

This is the pertinent part of UtilityMenu and its children:

<div id="UtilityMenu" style="display:none" >
<table bgcolor="#dddddd" align="left" valign="top" height="100%" width="100%" cellpadding="2" cellspacing="0" border="0" style="cursor:hand" style="border: 1pt ridge #000000">
<tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/orderget.aspx');"><b>Get Orders</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/treeview.aspx?');"><b>Doc. Repository</b></font></td></tr>
<%If LCase(Trim(Session("SecurityGroup"))) = "admin" Or LCase(Trim(Session("SecurityGroup"))) = "cpsadmin" Then%>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/usermaint.aspx');"><b>User Security</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/unitmaint.aspx');"><b>Unit Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/membmaint.aspx');"><b>Member Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/custmaint.aspx');"><b>Customer Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/custmaint_categoryadmin.aspx');"><b>Customer Category Maintenance</b></font></td></tr>
<%End If%>
<tr><td height="100%"></td></tr>
</table>
</div>

And I actually tried adding the values directly to both UtilityMenu and then the table, but they made no difference, either. I first tried:

<div id="UtilityMenu" style="display:none" width="auto" white-space: nowrap >

...and then this:

<table bgcolor="#dddddd" align="left" valign="top" height="100%" width="auto" white-space: nowrap cellpadding="2" cellspacing="0" border="0" style="cursor:hand" style="border: 1pt ridge #000000">

...but none of these things makes a bit of difference.

Solution

If you set #UtilityMenu div width: auto then table width automatically increase according to it's parent. You can use following CSS for this:

#UtilityMenu {
    width: auto;
    white-space: nowrap;
}