Question

我正在尝试为我的个人网站创建导航栏。我之所以使用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/

Answer 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>

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

1 个答案: