首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS -将flexbox下拉菜单放在内容上方

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

Stack Overflow用户
提问于 2018-07-20 08:45:49
回答 1查看 929关注 0票数 2

我正在尝试为我的个人网站制作导航栏。我之所以使用flexbox,是因为它是我到目前为止发现的唯一一个(纯CSS)解决方案,下拉菜单可以很好地处理链接的背景颜色。

我正在尝试定位下拉列表,使其在打开时浮动在内容上。我尝试将主要的导航li元素设置为position: relative,,然后将position: absolutez-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/

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-20 08:56:20

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

将它定位为绝对,并给它一个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>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51433587

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档