修复<ul> <li>菜单，推送<div> </div> </li> </ul>

Question

另一位开发人员在nav标签中创建了一个菜单，如下所示：

_layout page

<div>@Html.Partial("_menu")</div>

然后在_menu.cshtl页面中：

<div>@Html.RenderMenu("mainMenu")</div>

在C＃代码中，会生成一堆ul和li嵌套元素，这些元素首先在页面上看起来很好。 但是当你将鼠标悬停在其中一个元素上时，嵌套元素会下拉，而下面的div会被推到页面上。它很丑。我该如何解决？是否有一些CSS魔法可以让它覆盖下面的div而不是将其推下来？

Answer 1

只需将属性值绝对和更高 z-index 的位置添加到悬停时显示的元素。您可以通过顶部，底部，左侧和右侧属性值来控制位置

示例：

ul {
position: absolute;
left: 0; /* Adjust as needed */
right: 0; /* Adjust as needed */
}

注意：确保包含悬停时显示的元素的元素具有位置属性值r 精心以帮助包含Ul（在这种情况下）。否则，它将重叠。

Answer 2

没有代码很难看到，但你可以对重叠元素应用绝对定位。（我不知道哪一个是你没有提供任何代码）。所以：

position: absolute  

Answer 3

你必须使ul元素的位置相对。

ul{
    position: relative;
}