自动调整我的菜单列表CSS HTML的大小

当我将光标放在GOOGLE按钮上时，父块会自行调整大小。我希望孙子元素位于父按钮之外

代码：

ol{ 显示：无； } 李：悬停{ 显示：块； 左边距：-4.2米； } 李影{ 列表样式类型：无； 边框：2件纯黑； 长方体阴影：5px 5px 5px灰色； 边缘底部：10px； 文本对齐：居中； 宽度：10em； 左边距：1.5em； 浮动：左； 显示：块； }

---

解决此问题的一种方法是，只需在悬停时为li元素提供相同的高度：

这可以在以下示例中看到：

ol{ 显示：无； } 李：悬停{ 高度：18px； } 李：悬停{ 显示：块； 左边距：-4.2米； } 李影{ 列表样式类型：无； 边框：2件纯黑； 长方体阴影：5px 5px 5px灰色； 边缘底部：10px； 文本对齐：居中； 宽度：10em； 左边距：1.5em； 浮动：左； 显示：块； } ol{ 显示：无； } 李：悬停{ 显示：块； 左边距：-4.2米； } 李影{ 列表样式类型：无； 边框：2件纯黑； 长方体阴影：5px 5px 5px灰色； 边缘底部：10px； 文本对齐：居中； 宽度：10em； 左边距：1.5em； 浮动：左； 显示：块； }

---

我只需重新处理HTML结构，使菜单列表不嵌套在顶级菜单按钮中，然后只需在顶级菜单的悬停位置显示/隐藏菜单列表。

li:hover {
  height: 18px;
}