标题上方未显示下拉菜单答案

【问题标题】：Dropdown menu not showing above the header标题上方未显示下拉菜单
【发布时间】：2022-11-22 03:11:01
【问题描述】：

我有一个菜单，其中一个项目有一个下拉菜单。我在下拉 div 上使用 position:absolute，但它被切断了。

我怎样才能让下拉菜单停留在链接下方？

我尝试更改为 position:fixed，但如果我向下滚动页面，下拉 div 不会停留在悬停链接下方

这是我的代码：

dropdownItem.addEventListener('mouseover', () => {
    dropdownList.style.display = 'block'
    dropdownList.style.opacity = 1;
    dropdownList.style.visibility = 'visible'
    dropdownList.style.marginTop = '-5px'
})

dropdownItem.addEventListener('mouseout', () => {
    dropdownList.style.opacity = 0;
    dropdownList.style.visibility = 'hidden'
    dropdownList.style.marginTop = '1rem'
})

/* Theming */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root{
    --white: #f9f9f9;
    --black: #36383F;
    --grey: #85888C;
}

/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: var(--white);
    font-family: "Poppins", sans-serif;
   
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

.header {
    background-color: var(--black);
    box-shadow: 1px 1px 5px 0px var(--grey);
    position: sticky;
    top: 0;
    width: 100%;
}

.nav{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--black);
    overflow: hidden;    
}

.nav{
    height: 100%;
    transition: height .5s ease-out;
}

.menu {
    display: flex;
    justify-content: end;
}

.menu a{
    display: block;
    padding: 30px;
    color: var(--white);    
}

.menu p {
    display: block;
    padding: 30px;
    color: var(--white);
}

.menu li:hover{
    background-color: var(--grey);
}

.dropdownList {
    position: absolute;
    background: #ededed;
    width: 100%;    
    visibility:hidden;
    opacity:0;
    transition:all 0.2s linear;
    margin-top: 1rem;   
}

.dropdownList a {
    color: #36383F;
}

<header class="header">                 
        <nav class="nav">
            <ul class="menu">
                <li><a href="#">Gallery</a></li>
                <li class="dropdownItem" id="dropdownItem">
                    <p>Areas</p>
                    <div class="dropdownList" id="dropdownList">
                        <a href="#">Sub-Area 1</a>
                        <a href="#">Sub-Area 2</a>
                        <a href="#">Sub-Area 3</a>
                        <a href="#">Sub-Area 4</a>
                    </div>                        
                </li>
                <li><a href="#">Blog</a> </li>               
                <li><a href="#">About</a></li>                   
            </ul>
        </nav>
    </header>

你可以在 Fiddle 上看到它发生 Fiddle

【问题讨论】：

就像@neyu 告诉你的那样，问题是隐藏的溢出。如果你四处看看，你会发现你不需要 JS 来做这件事。你也可以通过使用 ul 和 li 元素来改进你的标记
我会感谢你

标签： html css

【解决方案1】：

它被切断的原因是因为您明确告诉它通过在父元素 .nav 上设置 overflow: hidden; 来做到这一点。删除它，它将起作用。

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

【讨论】：

非常感谢！

【解决方案2】：

问题是 .nav 类有 oveflow: hidden 这意味着任何试图逃避你的 div 的东西都将被隐藏。您可以将代码更改为：

body {
  overflow-x: hidden;
}

.nav{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--black);
}

您可以隐藏正文 x 轴上的溢出以防止显示水平滚动条，但这是可选的。

【讨论】：