Html 网格项导航栏内的Flexbox下拉菜单_Html_Css_Sass

Html 网格项导航栏内的Flexbox下拉菜单

html css sass

Html 网格项导航栏内的Flexbox下拉菜单,html,css,sass,Html,Css,Sass,我开始学习基本的网页设计，在过去的几天里我一直在使用导航栏我正在尝试生成一个基于CSS网格的结构。下拉菜单应在导航栏下方的一列中展开，同时与左侧的菜单点对齐，内容向右侧溢出我的导航栏目前是一个flexbox，但无论我做什么，下拉菜单要么根本不显示，要么像下面的版本一样被窃听我认为这与导航栏本身被放置在网格区域有关，但我无法找到解决方案，甚至无法找到替代方案这是我当前的代码笔：这是代码： <body> <div class="the_grid"

我开始学习基本的网页设计，在过去的几天里我一直在使用导航栏

我正在尝试生成一个基于CSS网格的结构。下拉菜单应在导航栏下方的一列中展开，同时与左侧的菜单点对齐，内容向右侧溢出

我的导航栏目前是一个flexbox，但无论我做什么，下拉菜单要么根本不显示，要么像下面的版本一样被窃听

我认为这与导航栏本身被放置在网格区域有关，但我无法找到解决方案，甚至无法找到替代方案

这是我当前的代码笔：

这是代码：

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

我非常感谢任何建议和帮助问题是，您为下拉内容中的每个

指定了相对位置和0的顶部

为了解决您的问题，请删除

位置：绝对和<代码>顶部：0下拉内容中li
-元素的code>，并将其添加到css中：
.navbar ul li:hover ul.dropdown-content {
    position: absolute;
    width: auto;
    top: 100%;
}

解释
您不必在下拉列表中设置每个li
-元素的位置，只需将下拉列表绝对定位到导航栏中的li
-元素（从顶部开始100%），并为其设置自动宽度
您当前的代码已经处理了悬停，因此默认情况下，display
属性设置为none
，如果您将鼠标悬停在父元素li
-上，它将更改为block
谢谢我按照你说的做了，并且删除了顶部：40，所以子菜单实际上从导航栏的正下方开始。但是子菜单作为一个整体仍然是不可见的，并且只显示我实际悬停的子菜单项。。我将对此进行研究，但如果您有想法，请让我知道^^您可以使用.navbar ul.dropdown-content li
为子菜单中的li
-元素设置样式。例如，您可以将项目的颜色
设置为白色，将整个项目的下拉内容的背景色设置为黑色。您将得到一个带有白色文本的黑色下拉菜单。
.navbar ul li:hover ul.dropdown-content {
    position: absolute;
    width: auto;
    top: 100%;
}