Html 如何保持嵌套<；李>；从扩展母公司<；李>；宽度？

My CMS通过嵌套下拉菜单来处理下拉菜单，如下所示：

正文{
文本对齐：居中；
}
ul导航{
保证金：0；
填充：0；
显示：内联块；
列表样式类型：无；
}
第一项{
保证金：0；
填充：0；
浮动：左；
填充：.5em；
}
下拉列表{
边缘：0-8em；
填充：0；
显示：无；
列表样式类型：无；
背景：#eee；
位置：相对位置；
}
a、 下拉列表：悬停+ul。下拉列表{
显示：块；
}

项目1
第2项展开父项：(
第3项




Lorem ipsum等…

我建议您将隐藏的

ul

元素从流中取出。这将防止它弄乱父元素的宽度，但会稍微“抵消”它。这可以用负数抵消。我使用了

左边距：45px

在本例中，您可能需要对其进行调整。如果需要，您还可以使用偏移下拉列表的高度

正文{
文本对齐：居中；
}
ul导航{
保证金：0；
填充：0；
显示：内联块；
列表样式类型：无；
}
第一项{
保证金：0；
填充：0；
浮动：左；
填充：0.5em；
}
下拉列表{
边缘：0-8em；
填充：0；
显示：无；
列表样式类型：无；
背景：#eee；
位置：相对位置；
}
a、 下拉列表：悬停+ul。下拉列表{
显示：块；
位置：绝对位置；
左边距：-45px；
/*顶部：90px*/
}

项目1
第2项展开父项：(
第3项




Lorem ipsum等…

您应将顶部项目设置为相对位置：

li.top-item {
  position: relative;
  ...
}

ul.dropdown-list {
  position: absolute;
  ...
}

并将子菜单项设置为绝对位置：

li.top-item {
  position: relative;
  ...
}

ul.dropdown-list {
  position: absolute;
  ...
}

除此之外，您还可以设置：

ul.dropdown-list {
  position: absolute;
  white-space: nowrap; /* no wrapping */
  left: 50%; /* horizontal center */
  transform: translateX(-50%); /* horizontal center */
}

最后，需要将悬停对象更新为：

li.top-item:hover ul.dropdown-list {
  display: block;
}

如问题中的示例所示，您无法选择子菜单

完整代码段：

正文{
文本对齐：居中；
}
ul导航{
保证金：0；
填充：0；
显示：内联块；
列表样式类型：无；
}
第一项{
保证金：0；
填充：0；
浮动：左；
填充：0.5em；
位置：相对位置；
}
下拉列表{
边缘：0-8em；
填充：0；
显示：无；
列表样式类型：无；
背景：#eee；
位置：绝对位置；
空白：nowrap；
左：50%；
转化：translateX（-50%）；
}
li.顶部项目：悬停ul.下拉列表{
显示：块；
}

项目1
项目2这是一个长项目
第3项




Lorem ipsum之类的…

这里有一支更好的笔，使用CMS中的实际html