css - Mega Drop Down 周围的边框

Question

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

目前我正试图通过定位 <ul> 来消除子菜单和顶部导航栏相交的顶部边框。下面<li>使用 z-index 属性。 <li>有相对定位附加到它和 <ul>子菜单的位置与此相关(我意识到 z-index 仅适用于定位元素。)Z-index 似乎有效，但边框继续显示出来。

你可以看到一个样本 here

Answer 1

您试图隐藏的元素 (ul) 是必须位于顶部的元素 (li) 的直接后代。这不能用 z-index 来完成。 (与祖先的 z-index 无关)

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

也就是说，如果您有一个父亲和 2 个 child ，则首先是父亲，然后是具有较低 z-index 的 child 。 z-index 给予兄弟之间的优先权，而不是父亲之前的儿子。