我开始学习基本的网页设计，最近几天我有点困在我的导航栏上。
我正在尝试生成基于 CSS 网格的结构。下拉菜单应该在导航栏下方的一列中展开，同时与左侧的菜单点对齐，并向右侧溢出内容。
我的导航栏目前是一个 flexbox，但无论我做什么，下拉菜单要么根本不显示，要么像下面的版本一样被窃听。
我认为这与导航栏本身被放置在网格区域有关，但我无法找到解决方案甚至替代方案。
这是我目前的 CodePen:https://codepen.io/gisbert12843/pen/pobJbyQ
这是代码:
<body>
<div class="the_grid">
<nav class="navbar">
<ul>
<li class="active"><a href="/index.html"><i class="fas fa-home"></i> Home</a></li>
<li class="dropdown"><a href="/dist/htmls/leistungen.html"><i class="fas fa-cut"></i> Leistungen</a>
<ul class="dropdown-content">
<li><a href="#">Herren</a></li>
<li><a href="#">Damen</a></li>
<li><a href="#">Farben und Strähnen</a></li>
<li><a href="#">Wellen und Glätten</a></li>
<li><a href="#">Extension | Perücken | Toupets</a></li>
<li><a href="#">Kuren</a></li>
<li><a href="#">Brautservice</a></li>
<li><a href="#">Kosmetik</a></li>
</ul>
</li>
<li><a href="/dist/htmls/covid.html"><i class="fas fa-hands-wash"></i> Covid-19</a></li>
<li><a href="/dist/htmls/inspiration.html"><i class="fas fa-images"></i> Inspiration</a></li>
<li><a href="/dist/htmls/jobs.html"><i class="fas fa-user-graduate"></i> Jobs</a></li>
<li class="dropdown"><a href="/dist/htmls/mehr.html"><i class="fas fa-chevron-right"></i> Mehr</a>
<ul class="dropdown-content">
<li><a href="/dist/htmls/mehr htmls/impressum.html"> Impressum</a></li>
<li><a href="/dist/htmls/mehr htmls/datenschutz.html"> Datenschutz</a></li>
</ul>
</li>
</ul>
</nav>
<div class="sidebar">
</div>
<div class="content1">
</div>
<div class="content2">
</div>
</div>
</body>
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100vh;
width: 100vw;
font-size: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
background: url(/images/background2.jpg) no-repeat center center fixed;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0px 3.5rem;
z-index: 0;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
max-width: 100vw;
}
.the_grid {
display: grid;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
grid-template-columns: 0.6fr 1fr 1fr 1fr;
grid-template-rows: 0.22fr 1fr 1.5fr 0.5fr;
grid-template-areas: "navb navb navb navb"
"sb c1 c1 c1"
"sb c1 c1 c1"
"sb c2 c2 c2";
}
.navbar {
grid-area: navb;
display: flex;
position: relative;
min-width: 100%;
max-width: 100%;
background-color: #ff1a4f;
justify-content: center;
align-items: center;
}
.active {
background-color: #ff573a;
}
.navbar ul {
list-style: none;
display: flex;
color: transparent;
position: relative;
}
.navbar ul li {
position: relative;
}
.navbar ul li a {
font-size: 1.5rem;
padding: 23px;
display: block;
position: relative;
z-index: 1;
color: #e4e4e4;
text-decoration: none;
}
.navbar ul li a:hover {
background-color: #ff8c00;
transition: 0.08s;
}
.dropdown-content {
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
}
.the_grid .navbar .dropdown-content li {
display: none;
position: absolute;
top: 40px;
}
.navbar ul li:hover .dropdown-content li {
display: block;
top: 0px;
}
.sidebar {
grid-area: sb;
overflow: hidden;
min-width: 100%;
max-width: 100%;
border-style: dashed;
border-color: green;
}
.content1 {
grid-area: c1;
overflow: hidden;
min-width: 100%;
max-width: 100%;
border-style: dashed;
border-color: yellow;
}
.content2 {
grid-area: c2;
overflow: hidden;
min-width: 100%;
max-width: 100%;
border-style: dashed;
border-color: red;
}
——
附言这是我在这里的第一个“贡献”，请指出我在提问等方面的错误。
最佳答案
问题是，你给每一个 <li>在下拉内容中的相对位置和顶部为 0。
为了解决您的问题，请删除 position: absolute;和 top: 0;的li -您的 .dropdown-content 中的元素并将其添加到您的 css 中:
.navbar ul li:hover ul.dropdown-content {
position: absolute;
width: auto;
top: 100%;
}
您不必设置每个
li 的位置-element 在下拉列表中，只需将下拉列表绝对定位到 li -element 在你的导航栏中(从顶部 100%)并给它一个 auto 的宽度。您当前的代码已经处理了悬停，因此默认情况下它是
display属性设置为 none如果您将鼠标悬停在父级 li 上-element 它已更改为 block .
关于html - 网格项导航栏中的 Flexbox 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64299326/