个人中心
gpt4 book ai didi

html - 网格项导航栏中的 Flexbox 下拉菜单

转载 作者：行者123 更新时间：2023-12-04 13:32:18 25 4
gpt4 key购买 nike

我开始学习基本的网页设计，最近几天我有点困在我的导航栏上。
我正在尝试生成基于 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>
这是 CSS: 
*,
*::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;
}

我很感激任何形式的建议和帮助! <3
——
附言这是我在这里的第一个“贡献”，请指出我在提问等方面的错误。

最佳答案

问题是，你给每一个 <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/

25 4 0
文章推荐： css - 使用 Inspect Element 编辑 CSS 后，Chrome DevTools 将 CSS Link Files 更改为 "Constructed Stylesheet"，如何解决？
文章推荐： angularjs - 如何在 Controller 内使用 Angular 输入字段电子邮件验证？
文章推荐： asp.net-core - Asp.Net Core中的多个JWT授权机构/发布者
文章推荐： java - Android Deeplink 两次打开应用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com