logo标签列表

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

htmlasp.netmenuwidthsubmenu
3

我添加了一个比其他子菜单更详细的项目，以便将其结尾截断：

enter image description here

正如您所看到的，“客户类别维护”子菜单项被截断了。我想增加子菜单区域的宽度，以便完全显示。怎么做？
它出现的表具有“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和表格中，但它们都没有产生任何影响。我首先尝试了：

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

...但这些事情都没有丝毫影响。

我相信这就是所有相关的代码。 - B. Clay Shannon-B. Crow Raven
1个回答
2
如果你将 #UtilityMenu div 的 width 设置为 auto，则表格的宽度会根据它的父元素自动增加。你可以使用以下 CSS 实现：
#UtilityMenu {
    width: auto;
    white-space: nowrap;
}
1
对我有用... :) - Subodh Sharma
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接