css - Mega Drop Down 周围的边框

Question

我正在构建一个仅 CSS 的下拉列表。我需要<li>在主导航列表中的周围有一个连续的边框，以及<ul>在悬停时出现的嵌套子菜单。

目前，我正在尝试通过使用 z-index 属性定位<ul>下方来消除子菜单和顶部导航栏相遇的顶部边框。<li>附加了<li>相对定位，并且<ul>子菜单相对于它定位（我意识到 z-index 仅适用于定位元素。） Z-index 似乎正在工作，但边框继续显示。

您可以在此处查看示例

Answer 1

您试图隐藏的元素 (ul) 是必须位于顶部 (li) 的元素的直接后代。z-index 无法做到这一点。（和祖先的z-index无关）

您需要放置另一个元素，即 li 的子元素，以隐藏您不想要的边框部分

也就是说，如果您有一个父亲和 2 个孩子，则先是父亲，然后是 z-index 较低的孩子。z-index 给予者偏好在兄弟之间，而不是在父亲面前给儿子。