如何扩大特定顶级菜单项的子菜单项区域？

Question

我添加了一个比其他子菜单更冗长的子菜单项，因此它的末尾被截断了：

如您所见，"Customer Category Maintenance" 子菜单项被截断了。我想增加子菜单区域的宽度，以便完整显示。怎么样？

出现的table的宽度值为“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">

新的子菜单项是：

    <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>

我希望 "width = 100%" 意味着该区域将根据需要扩展以容纳子菜单项的所有文本，但显然并非如此。那么，我必须怎么做才能将宽度增加一点点呢？我是否需要添加一个硬编码的像素宽度，并进行试验直到它足够宽，或者有更优雅的方法吗？

这里有更多 html，如果需要（在上下文中）：

<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%>

更新

我非常确定答案会奏效，所以我继续将其标记为正确并授予赏金；但是，它对我不起作用。

我将此 CSS 添加到页面：

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

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

这是 UtilityMenu 及其子项的相关部分：

<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>

我实际上尝试将值直接添加到 UtilityMenu 和 table，但它们也没有任何区别。我第一次尝试：

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

...然后是：

<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">

...但是 none 这些东西有点不同。

Answer 1

如果您设置 #UtilityMenu div width: auto 则 table 宽度会根据其父项自动增加。您可以为此使用以下 CSS：

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

如何扩大特定顶级菜单项的子菜单项区域？

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

html

asp.net

menu

width

submenu

更新