CSS - 在内容上方放置 flexbox 下拉菜单答案

【问题标题】：CSS - Position flexbox dropdown above contentCSS - 在内容上方放置 flexbox 下拉菜单
【发布时间】：2018-07-20 09:13:46
【问题描述】：

我正在尝试为我的个人网站制作导航栏。我使用 flexbox 是因为它是迄今为止我发现的唯一（纯 CSS）解决方案，其中下拉菜单与链接背景颜色很好地配合。

我正在尝试定位下拉菜单，使其在打开时漂浮在内容上方。我尝试将主要导航 li 元素设置为具有 position: relative, 然后设置 position: absolute 和 z-index: 1 为 .dropdown ul ，这在技术上有效，但它破坏了链接的灰色背景颜色。我也尝试使用块，但无论哪种方式看起来仍然很糟糕。有谁知道这方面的纯 CSS 解决方案？

body {
	font-family: 'Roboto', 'Helvetica', sans-serif;
	background-color: black;
	margin: 0 auto;
	color: white;
}

.container {
	display: flex;
	flex: auto;
}

/*** NAV ***/
.navbar {
	font-family: 'Zilla Slab', serif;
	font-size: 16pt;
}

.navbar ul {
	list-style: none;
	padding: 0 0;
	margin: 0 0;
}

.navbar a {
	text-decoration: none;
	color: white;
}

.navbar ul li {
	padding: 5px;
	position: relative;
}

.navbar li:hover {
	background-color: grey;
	transition: ease-in-out .25s;
}

.dropdown ul {
	margin: 0;
	display: none;
}

.dropdown ul li {
	padding: 2px 0;
	z-index: 1;
}

.dropdown:hover ul, .dropdown ul:hover {
	display: flex;
	flex-direction: column;
}

/*** CONTENT ***/
.content {
	display: block;
	position: relative;
	z-index: -1;
	margin-left: 0;
	background-color: orange;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="utf-8">
	<meta name="author" content="Ariel Mordoch">
	<meta name="description" content="The personal website of Ariel Mordoch.">
	<title>Ariel Mordoch</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
	<header>
		<div class="navbar"> 
			<nav>
				<ul class="container">
					<li><a href="index.html">ariel mordoch</a></li>
					<li><a href="#">about</a></li>
					<li><a href="#">resume</a></li> 
					<li><a href="#">contact</a></li>
					
					<li class="dropdown">drop
							<ul class="container">
								<li><a href="#">a</a></li>
								<li><a href="#">b</a></li>
								<li><a href="#">c</a></li>
							</ul>
					</li>
				
				</ul>
			</nav>
		</div>
	</header>
	
	<main>
		<div class="content">
			<p>placeholder</p>
		</div>
	</main>
</body>
</html>

jsfiddle：http://jsfiddle.net/eq6o3yp5/8/

【问题讨论】：

stackoverflow.com/q/37332329/3597276

标签： html css flexbox

【解决方案1】：

当您将其定位为绝对时，相对元素不会被“拉伸”或调整大小，因此，这就是相对元素的背景不会反映在绝对定位元素上的原因。

将其定位为绝对并给它一个width，也许是一个min-width...并设置一个所需的background-color或设置它background-color: inherit;

.dropdown:hover ul, .dropdown ul:hover {
    ...
    background-color: grey;
    min-width: 100%;
    position: absolute;
}

body {
	font-family: 'Roboto', 'Helvetica', sans-serif;
	background-color: black;
	margin: 0 auto;
	color: white;
}

.container {
	display: flex;
	flex: auto;
}

/*** NAV ***/
.navbar {
	font-family: 'Zilla Slab', serif;
	font-size: 16pt;
}

.navbar ul {
	list-style: none;
	padding: 0 0;
	margin: 0 0;
}

.navbar a {
	text-decoration: none;
	color: white;
}

.navbar ul li {
	padding: 5px;
	position: relative;
}

.navbar li:hover {
	background-color: grey;
	transition: ease-in-out .25s;
}

.dropdown ul {
	margin: 0;
	display: none;
}

.dropdown ul li {
	padding: 2px 0;
	z-index: 1;
}

.dropdown:hover ul, .dropdown ul:hover {
	display: block;
	position: absolute;
  background-color: grey;
  left: 0;
  min-width: 100%;
  position: absolute;
}

/*** CONTENT ***/
.content {
	display: block;
	position: relative;
	z-index: -1;
	margin-left: 0;
	background-color: orange;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="utf-8">
	<meta name="author" content="Ariel Mordoch">
	<meta name="description" content="The personal website of Ariel Mordoch.">
	<title>Ariel Mordoch</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
	<header>
		<div class="navbar"> 
			<nav>
				<ul class="container">
					<li><a href="index.html">ariel mordoch</a></li>
					<li><a href="#">about</a></li>
					<li><a href="#">resume</a></li> 
					<li><a href="#">contact</a></li>
					
					<li class="dropdown">drop
							<ul class="container">
								<li><a href="#">a</a></li>
								<li><a href="#">b</a></li>
								<li><a href="#">c</a></li>
							</ul>
					</li>
				
				</ul>
			</nav>
		</div>
	</header>
	
	<main>
		<div class="content">
			<p>placeholder</p>
		</div>
	</main>
</body>
</html>

【讨论】：