Javascript 展开li元素以适应内容

我试图让父li（菜单项）在悬停时加宽（水平），以适应所有ul li项目（子菜单项），而无需硬编码宽度，这样就不会浮动或截断文本

我正在用无序列表制作菜单。每个子菜单项都位于主菜单的li标记内。“我的菜单”是水平的，当您将鼠标悬停在元素上时，它会显示子菜单项

我尝试了各种方法，试图让li元素扩展到子菜单项的大小，如果它们较小，则保持相同的大小。我笨重但有效的方法是在悬停时硬编码22%的宽度。我想知道是否有办法做到这一点，并很好地适应文本，而不是有大量的空白。硬编码宽度也会导致没有子菜单项的菜单项展开（我可以解决这个问题，但我不想从一开始就硬编码）

我需要完全用普通的html、css和javascript来完成这项工作。如果解决方案是跨浏览器兼容的，那也不错

我很抱歉，如果我的代码是非常规的，我一直在尝试自学css。先谢谢你

以下是我的HTML/CSS示例（减去链接）：

正文{
保证金：0；
}
*{
字体系列：Gotham Book、Arial、Helvetica、无衬线字体；
}
#导航栏{
背景色：#f1f1；
文本对齐：居中；
}
#导航设备{
保证金：0自动；
}
#navbaritems ul{
填充：0；
宽度：100%；
列表样式类型：无；
保证金：0；
显示：内联；
位置：相对位置；
字号：0；
}
#navbaritems ul li{
显示：内联块；
空白：nowrap；
文本对齐：居中；
颜色：#000；
位置：相对位置；
}
#navbaritems ul li ul{
宽度：100%；
填充：0；
位置：绝对位置；
顶部：6vh；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
显示：无；
不透明度：0；
可见性：隐藏；
文本对齐：居中；
-webkit transiton：不透明度0.2s；
-moz转变：不透明度0.2s；
-ms转换：不透明度0.2s；
-o-转变：不透明度0.2s；
-过渡：不透明度0.2s；
}
#navbaritems ul li ul li{
背景色：#f1f1；
显示：块；
}
#navbaritems ul li：悬停ul{
显示：块；
不透明度：1；
能见度：可见；
}
#navbaritems ul li：悬停{
-o-转变：1s；
-ms转换：1s；
-moz跃迁：1s；
-webkit转换：1s；
过渡：1s；
宽度：22%；
}
#navbaritems ul li ul li:悬停{
-o-转变：1s；
-ms转换：1s；
-moz跃迁：1s；
-webkit转换：1s；
过渡：1s；
宽度：100%；
}
#navbaritems ul li a{
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
-o-用户选择：无；
用户选择：无；
字体大小：1vw；
显示：块；
高度：4vh；
线路高度：4vh；
颜色：#808080；
文字装饰：无；
填充：1vh；
保证金：0；
}
#navbaritems ul li a:悬停：未（.active）{
背景色：#82c986；
颜色：#ffffff；
-o-转变：.3s；
-ms转换：.3s；
-moz跃迁：.3s；
-webkit转换：.3s；
过渡：.3s；
光标：指针；
显示：块；
}
#navbaritems ul li a.主动{
颜色：#ffffff；
背景色：#4CAF50；
}

家

患者资格

资格追踪器



索赔状态

汇款通知

电子索赔批次状态

费用

更新费用

报销报告

报销明细报告

提交费用



询问

客户服务查询

COB变更请求

提交查询



背景

程序集

资格追踪器

索赔设置

汇款通知




其他

供应商研讨会

这里的大问题是父

li

元素在悬停之前只知道与主

a

一样大，因为子

ul

具有

显示：无表示宽度实际上为0。而不是使用
显示：无您可以尝试强制高度为0并保留初始宽度。然后悬停，执行高度：继承
以显示菜单项。记住使用
溢出：隐藏这样，当高度不够大时，事物不会超出元素

编辑：需要做更多的工作，但这正是您需要的。
我不确定这是否是有效的解决方案。但您可以将ID分配给每个主li项中最大的ul li项。并将其宽度指定给JS中的主li项。html是从数据库表动态生成的，因此我不愿意硬编码任何内容。我希望有一些CSS的位，我错过了或可以改变来完成这一点。谢谢你的建议。主导航栏项目的数量会减少还是增加？现在你有九个项目（“家庭”、“患者资格”等），你的情况是否需要说明它们是，比如说，八个项目？屏幕分辨率是主要考虑因素吗？屏幕分辨率不是主要考虑因素，字体大小也设置为1vw，所以我认为这并不重要。我已经在非常小的屏幕上测试过这个菜单，它从来都不是问题。对不起，我可能用词不好，但宽度是问题所在，因为每个子菜单项默认为父菜单项的大小。我希望整个父li在悬停时展开，以便所有子菜单项都可以容纳。