防止填充背景颜色溢出到子元素中

Question

我已经用谷歌搜索了很多，但我在 SO 上或这里都找不到答案。我需要弄清楚如何防止填充背景颜色溢出到其子元素中。 子元素不能移出它的位置。

我已经尝试过溢出：隐藏、z-index 以及几乎所有内容。

只看到 jsfiddle 绝对是最简单的： https://jsfiddle.net/so23hbf0/3/

HTML：

<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
    <a href="#" class="dropbtn">Books & Media</a>
    <div class="dropdown-content">
        <div class="header">
            <h2>Mega Menu</h2>
        </div>   
    </div>
</div> 

CSS：

.navbar {
    overflow: hidden;
    background-color: yellow;
 }

.navbar a {
    padding: 2rem 1.6rem;
  overflow: hidden;
}

.dropdown {
    overflow: hidden;
    display: inline;
}

.navbar a:hover {
    background-color: black;
}

.dropdown-content {
    background-color: gray;
}

请注意，当您悬停链接时，黑色背景会溢出到灰色的“超级菜单”区域。但它不会溢出顶部。我想防止它向下溢出。

Answer 1

定位div.dropdown，以便您可以使用z-index 控制与周围元素相关的堆栈顺序，防止菜单重叠。

只有位置值不是初始值 - static - 的元素才能使用 z-index 重新排列其堆叠上下文，例如，请参阅 MDN。

div.dropdown {
    /* ... */
    position: relative; 
    z-index: 1;
}

例如：https://jsfiddle.net/0mczuLsx/

Answer 2

.navbar {
	overflow: hidden;
  background-color: yellow;
}

.navbar a {
	padding: 2rem 1.6rem;
  overflow: hidden;
}

.dropdown {
	overflow: hidden;
	display: inline;
}

.navbar a:hover {
	background-color: black;
}

.dropdown-content {
	background-color: gray;
}

div.dropdown{
    /* ... */
    position: relative; 
    z-index: 1;
}

<!--Change Html to:-->

<div class="navbar">
	<a href="#home">Home</a>
	<a href="#news">News</a>
  <a href="#" class="dropbtn">Books & Media</a>
	<div class="dropdown">
		<div class="dropdown-content">
			<div class="header">
				<h2>Mega Menu</h2>
			</div>	 
		</div>
	</div> 
</div>