我正在尝试为我的个人网站制作导航栏。我使用 Flexbox 是因为它是迄今为止我发现的唯一(纯 CSS)解决方案，其中下拉菜单与链接背景颜色配合得很好。
我正在尝试定位下拉列表，以便它在打开时漂浮在内容上。我尝试将主导航 li 元素设置为 position:relative, 然后设置 position:absolute 和 z-index: 1 for .dropdown ul ，这在技术上是可行的，但它破坏了链接的灰色背景颜色。我也尝试过使用 block ，但无论如何看起来仍然很糟糕。有谁知道一个纯 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/
最佳答案
当您将其定位为绝对时，相对元素不会被“拉伸(stretch)”或调整大小，因此，这就是为什么相对元素的背景不会反射(reflect)在绝对定位元素上的原因。
将其定位为绝对并给它 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>关于html - CSS - 将 flexbox 下拉菜单放置在内容上方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51433587/